title: how to hide a <span> tag and show it with javascript
body: <p>i have this sample html coding</p>
  
  <pre><code>&lt;form id = "myform" onsubmit = "return checkcheckboxes()"&gt;
  task 1&lt;/task&gt;&lt;input type = "checkbox" name = "chk1"&gt;&lt;/br&gt;
  task 2&lt;input type = "checkbox" name = "chk2"&gt;&lt;/br&gt;
  task 3&lt;input type = "checkbox" name = "chk3"&gt;&lt;/br&gt;&lt;/br&gt;
  &lt;input type = "submit" value = "Go to the next task"&gt;&lt;/br&gt;
  &lt;span id = "message" &gt;congratulations! you have completed all the task completely&lt;/span&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and this is the JS</p>
  
  <pre><code>function checkcheckboxes() {
  document.getElementById("message").innerHTML = "";
  var valid = true;
  var f = document.getElementById("myform");
  if (f.chk1.checked == false) {valid = false}
  if (f.chk2.checked == false) {valid = false}
  if (f.chk3.checked == false) {valid = false}
  if (!valid) {document.getElementById("message").innerHTML = "You must check all three boxes to proceed"};
  return valid;
  }
  </code></pre>
  
  <p>If you open the code in the browser with JS, it will show you three checkboxes with a submit button and there is a span text under submit button saying </p>
  
  <blockquote>
    <p>congratulations! you have completed all the tasks completely</p>
  </blockquote>
  
  <p>If you check >2 boxes and click submit, the text under the submit button will say</p>
  
  <blockquote>
    <p>You must check all three boxes to proceed</p>
  </blockquote>
  
  <p>and if you check all 3 boxes the message will change again back to:</p>
  
  <blockquote>
    <p>congratulations! you have completed all the tasks completely</p>
  </blockquote>
  
  <p>what i want to do is remove the saying:</p>
  
  <blockquote>
    <p>congratulations! you have completed all the tasks completely</p>
  </blockquote>
  
  <p>and only show it when all the boxes are checked and submit button is click, since is showing even though boxes are not checked.</p>