Question

我正在尝试在外部JavaScript中链接基本计算表单非常简单，功能只是检查以确保步骤编号是均匀的。我已多次查看代码，但是当我输入数字并点击提交时没有任何反应。有什么建议？它似乎我只是没有正确链接的功能和输入元素。这是代码：

function evenNumbers() {
var evenNumberBtn = document.querySelector("button");
evenNumberBtn.addEventListener("click", evenNumbers);
    var startNumber = parseInt(document.getElementById("startNumber").value);
    var endNumber = parseInt(document.getElementById("endNumber").value);
    var stepNumber = parseInt(document.getElementById("stepNumber").value);
        while (startNumber + stepNumber <= endNumber) {  
            if (startNumber <= endNumber){
                if (startNumber % 2 === 0 && stepNumber % 2 === 0) {
                    startNumber += stepNumber;
                    alert(startNumber);
                } else if (startNumber % 2 !== 0 && stepNumber % 2 === 0) {
                     startNumber += 1 + (stepNumber);
                     alert(startNumber);
                } else {
                     alert("Please enter a positive number for the step value.");
                } 

             } else {
                  alert("Please enter an ending number greater than the start number.");
             }
        }
}

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
  <form>
  <label>Start: </label>
  <input type="number" id="startNumber"/><br/>
  <label>End: </label>
  <input type="number" id="endNumber"/><br/>
  <label>Step by:</label>
    <input type="number" id="stepNumber"/><br/>
  <button onclick="evenNumbers();">Submit</button>
    <p></p>
  </form>

<!-- End your code here -->
</body>
</html>

Answer 1

试试这个：在.js文件中

var evenNumberBtn = document.querySelector("button");
evenNumberBtn.addEventListener("click", evenNumbers);

Answer 2

我现在已经删除了你的实际代码，因为它有一些问题，你可以最终进入一个无限循环（我肯定做了，它崩溃了Chrome）。

您的问题出在您的HTML

中

在

<button onclick("evenNumbers();")>Submit</button>

在

<button onclick="evenNumbers();">Submit</button>

＆＃13;

        function evenNumbers() {
        var startNumber = parseInt(document.getElementById("startNumber").value);
        var endNumber = parseInt(document.getElementById("endNumber").value);
        var stepNumber = parseInt(document.getElementById("stepNumber").value);
        alert(startNumber + ',' + endNumber + ',' + stepNumber);
    }

＆＃13;

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML5, CSS3 and JavaScript demo</title>
    </head>
    <body>
      <form>
      <label>Start: </label>
      <input type="text" id="startNumber"/><br/>
      <label>End: </label>
      <input type="text" id="endNumber"/><br/>
      <label>Step by:</label>
        <input type="text" id="stepNumber"/><br/>
      <button onclick="evenNumbers();">Submit</button>
        <p></p>
      </form>

    <!-- End your code here -->
    </body>
    </html>

＆＃13;

Answer 3

function evenNumbers() {
//var evenNumberBtn = document.querySelector("button");
//evenNumberBtn.addEventListener("click", evenNumbers);
    var startNumber = parseInt(document.getElementById("startNumber").value);
    var endNumber = parseInt(document.getElementById("endNumber").value);
    var stepNumber = parseInt(document.getElementById("stepNumber").value);
        while (startNumber + stepNumber <= endNumber) {  
            if (startNumber <= endNumber){
                if (startNumber % 2 === 0 && stepNumber % 2 === 0) {
                    startNumber += stepNumber;
                    alert(startNumber);
                } else if (startNumber % 2 !== 0 && stepNumber % 2 === 0) {
                     startNumber += 1 + (stepNumber);
                     alert(startNumber);
                } else {
                     alert("Please enter a positive number for the step value.");
                } 

             } else {
                  alert("Please enter an ending number greater than the start number.");
             }
        }
}

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
  <form>
  <label>Start: </label>
  <input type="text" id="startNumber"/><br/>
  <label>End: </label>
  <input type="text" id="endNumber"/><br/>
  <label>Step by:</label>
    <input type="text" id="stepNumber"/><br/>
  <button onclick="evenNumbers()">Submit</button>
    <p></p>
  </form>

<!-- End your code here -->
</body>
</html>

Answer 4

evenNumber函数中的前两行需要在函数外部，否则您的代码永远不会到达该块内部。

$( document ).ready(function() {

  var evenNumberBtn = document.querySelector("button");
  evenNumberBtn.addEventListener("click", evenNumbers);
  function evenNumbers() {
    /*

       your code here

    */
  }    

});

evenNumbers里面的逻辑似乎也错了。你可能也需要改变它。

将JavaScript计算功能添加到HTML表单

4 个答案: