title: Html style changes don't stick when applied after form button onclick
body: <p>I am following a beginner class in html. Through javascript I am trying to modify a form button aspect when the form is submitted, but that modification reverts right away. It looks like the DOM or the form gets reset, but I don't know how to work around that.</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 validateQuestion1(radio){
   document.getElementById("valider1").style.background='green';
   myAnswer = false;
   for (var i=0;i&lt;radio.length;i++) {
    if ((radio[i].checked) &amp;&amp; (radio[i].value=="1")) {
     myAnswer=true;    
    } 
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;body&gt;
       &lt;form name="question1"&gt;
     &lt;legend&gt;La première balise présente dans un fichier html doit être:&lt;/legend&gt;
     &lt;input type="radio" id="choix1" name="Q1" value="0"&gt;
     &lt;label for="head" id="head1"&gt;head&lt;/label&gt;
     &lt;input type="radio" id="choix2" name="Q1" value="0"&gt;
     &lt;label for="body" id="head2"&gt;body&lt;/label&gt;
     &lt;input type="radio" id="choix3" name="Q1" value="1"&gt;
     &lt;label for="!DOCTYPE" id="head3"&gt;!DOCTYPE&lt;/label&gt;
     &lt;input type="radio" id="choix4" name="Q1" value="0"&gt;
     &lt;label for="html" id="head4"&gt;html&lt;/label&gt;
     &lt;button onclick="validateQuestion1(document.forms.question1.Q1)" id="valider1"&gt;Valider&lt;/button&gt;
       &lt;/form&gt;
     &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>