Question

我要的是，用户输入主题数后，系统将根据输入的主题数显示输入框的数量，然后在用户单击按钮时应显示总和。我尝试了很多方法，但是我没有显示总和，有人知道我犯了什么错误？

下面是我的代码：

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 <= subject; num++) {

      document.write("Enter the mark for subject " + num + " : ");
      var value = parseFloat(document.write("<input/><br>"));

      sum += value;

    }

    var calc = document.write("<button>Next</button><br>");
    calc.onclick = function() {
      next()
    };

    function next() {
      document.write("Total marks: " + sum + "%");
    }
  }

}

<html>

<body>
  Enter the number of subject: <input type="text" onkeypress="return/[0-9]/i.test(event.key)" id="1" value=""><br>
  <button onclick="select()">Check</button><br>
</body>

</html>

Answer 1

这就是我重写了大部分代码的方式。我有内嵌评论来解释我的工作。

function select() {

  var x = parseInt(document.getElementById('1').value, 10);
  // Getting the div that wraps the initial form.
  var formWrapper = document.querySelector('.formWrapper');
  // Getting the div, that is going to display the new fields and the results.
  var results = document.querySelector('.results');

  // I have switch your statement from x == '' to '' === x as it 
  // consists a good practice
  if ( '' === x ) {
    alert("Please fill up number of subject");
  // I have remove the isNaN(x) == true, because the isNan will 
  // be either true or false.
  } else if ( isNaN(x) ) {
    alert("Please fill up number of subject with number");
  } else {
    // Using parseInt(x, 10) to set the base.
    var subject = parseInt(x, 10);
    // In this array, I store the auto-generated fields.
    var fieldsList = [];

    // Removing the first div from the DOM
    formWrapper.parentElement.removeChild(formWrapper);

    for ( var num = 1; num <= subject; num++ ) {
      // I am creating a new field
      var newField = document.createElement('input');
      // I push the field into the array I made for the fields.
      fieldsList.push(newField);
      // I append the field in the HTML
      results.appendChild(newField);

      // I create a <br> tag
      var br = document.createElement('br');
      // And I append the tag in the DOM
      results.appendChild(br);
    }

    // I create the button that is going to handle the Next functionality
    var nextButton = document.createElement('button');
    // I set the button text
    nextButton.innerText = 'Next';
    // I add an Event Listener for the click event.
    nextButton.addEventListener(
      'click',
      function() {
          // I reset the sum to 0
          var sum = 0;

          // I itterate the fields auto-generated and saved in the array
          fieldsList.forEach(
            function(field) {
              // I get the value
              sum += parseInt(field.value, 10);
            }
          );

          // I create the field that is going to display the output
          let resultText = document.createElement('div');
          // I set the text  based on the sum
          resultText.innerText = "Total marks: " + sum + "%";

          // I append the text message to the DOM
          results.appendChild(resultText);
      }
    );

    // I append the button to the DOM
    results.appendChild(nextButton);
  }

}

<html>

<body>
  <div class="formWrapper">
    Enter the number of subject: <input type="text" onkeypress="return/[0-9]/i.test(event.key)" id="1" value=""><br>
    <button onclick="select()">Check</button><br>
  </div>
  <div class="results"></div>
</body>

</html>

尽管我单击按钮，但总和无法显示

1 个答案: