Difficulty dynamically adding a border around a div using Javascript : <p>We have a "Terms and Conditions" checkbox, and when "Place Order" is clicked, among other things, I want to validate that Terms&amp;Conditions is checked, and if not, add a thin red border around the surrounding div.  I am unable to get the following to work though.</p>

<pre><code>if (!terms.checked) {
    console.log(terms.parentNode.parentNode);
    terms.parentNode.parentNode.style.border = '1px red';
    //terms.parentNode.parentNode.style.borderWidth = '1px';
    //terms.parentNode.parentNode.style.borderColor = 'red';
}
</code></pre>

<p>I know my Javascript is getting the correct node, as when I log it to console and then hover over it, it highlights the element.  As you can see from the commented out lines I've tried adding <code>borderWidth</code> and <code>borderColor</code> individually, but also to no avail.</p>

<p>I've referred to both <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/border</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style</a> and cannot figure out what I should be doing differently.  I've also created the following fiddle to no avail: <a href="https://jsfiddle.net/LLdozham/" rel="nofollow noreferrer">https://jsfiddle.net/LLdozham/</a></p>

<p><a href="https://i.stack.imgur.com/TKZEQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TKZEQ.png" alt="enter image description here"></a></p>
