title: Change applied to HTML element style from JS function does not show up
body: <p>Here is a short snippet of my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function checkFields() {
      const nameFormat = /^[a-zA-Z-' -]*$/;
  
      let fieldPrenom = document.getElementById("prenom");
      let divPrenom = document.getElementById("divPrenom");
      if (!fieldPrenom.value.match(nameFormat)) {
          divPrenom.innerHTML = "&lt;br&gt;&lt;p&gt;Only letters please&lt;/p&gt;" + divPrenom.innerHTML
          highlightRed(fieldPrenom);
          return false;
      } else return true;
  }
  
  function highlightRed (inputBox) {
      inputBox.style.border = "0.2vw solid red";
      console.log("Current border style : " + inputBox.style.border);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input.default {
      border: 0.1vw solid;
      border-radius: 0.25vw;
      min-width: 30vw;
      font-size: 1.5em;
      margin-left: 0.6vw;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form onsubmit="return checkFields()"&gt;
  &lt;div class="questions" id="divPrenom"&gt;
  &lt;input id="prenom" type="text" required class="default"&gt;
  &lt;/div&gt;
  &lt;input type="submit" value="Send" class="default"/&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If you run it, you see that my inputBox does not highlight in red although <code>Current border style : 0.2vw solid red</code> is logged in console. So why are the changes not rendered ?</p>
  <p>I also tried to not use a function to highlight in red and do it directly in <code>checkFields</code> like this :</p>
  <pre class="lang-js prettyprint-override"><code>if (!fieldPrenom.value.match(nameFormat)) {
       divPrenom.innerHTML = &quot;&lt;br&gt;&lt;p&gt;Only letters please&lt;/p&gt;&quot; + divPrenom.innerHTML
       fieldPrenom.style.border = &quot;0.2vw solid red&quot;;
       return false;
      }
  </code></pre>
  <p>But here something very weird happens : the inputBox borders turn into red but only if you <em>fail</em> two times the validation (eg. enter &quot;123&quot;, submit, then do the same thing) again and border should finally become red.</p>
  <p>Any help is much appreciated</p>
  <h2>Side note</h2>
  <p>I know that if you try multiple times to validate, the &quot;Only letter please&quot; paragraph will print itself several times but I have this fixed in my code I simply not included in this snippet</p>