title: The sum cannot show although i click on the button
body: <p>What I want is, after the user enters the number of subjects, the system will show the number of input box according to the number of subjects entered, then when the user clicks on the button, it should show the sum. I tried many ways, but I failed to show the sum, anyone knows what is the mistake I made?</p>
  <p>Below is 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 select() {
  
    var x = parseInt(document.getElementById('1').value);
  
    if (document.getElementById('1').value == "") {
      alert("Please fill up number of subject");
    } else if (isNaN(x) == true) {
      alert("Please fill up number of subject with number");
    } else {
  
      var subject = parseInt(document.getElementById('1').value);
      var sum = 0;
  
      for (var num = 1; num &lt;= subject; num++) {
  
        document.write("Enter the mark for subject " + num + " : ");
        var value = parseFloat(document.write("&lt;input/&gt;&lt;br&gt;"));
  
        sum += value;
  
      }
  
      var calc = document.write("&lt;button&gt;Next&lt;/button&gt;&lt;br&gt;");
      calc.onclick = function() {
        next()
      };
  
      function next() {
        document.write("Total marks: " + sum + "%");
      }
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
    Enter the number of subject: &lt;input type="text" onkeypress="return/[0-9]/i.test(event.key)" id="1" value=""&gt;&lt;br&gt;
    &lt;button onclick="select()"&gt;Check&lt;/button&gt;&lt;br&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>