title: How do i hide my submit button until my Form is validated
body: <p>I am currently doing a school project and once again, I have another question to ask! I would like to create a function that prevents my submit button from working unless the value in my "Topic" and "Question" is filled. </p>
  
  <p>What I want to try doing, is to make my Submit button become <code>display: none;</code> if my "topic" and "Question" field is empty. </p>
  
  <p>I have tried using a <code>if (data != 0)</code> or a <code>.strLength</code> extension. However, I am not really sure of how it should work. </p>
  
  <p>Any help will be appreciated </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="TestingTrueQuestionStylesheet.css"&gt;
  
      &lt;script&gt;
        function submitAnswer(){
  
        var data = document.getElementById("Question").value;
        var topicName = document.getElementById("TopicName").value;
  
  
        localStorage.newdata = data;
        localStorage.topicName = topicName;
  
  
  
        }
  
      &lt;/script&gt;
    &lt;/head&gt;
  
  
    &lt;body&gt;
        &lt;form&gt;
          &lt;fieldset&gt;
                &lt;input placeholder="Topic" id="TopicName" required type="text"&gt;&lt;/input&gt;
                &lt;br/&gt;
                &lt;textarea placeholder="Question" id="Question" required rows="30" cols="100"&gt;&lt;/textarea&gt;
                &lt;br/&gt;
  
                &lt;input type="submit" onclick="submitAnswer()" id="SubmitButton" required &gt;&lt;/input&gt;
          &lt;/fieldset&gt;
        &lt;/form&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>