客户端 Javascript 按钮不起作用？

Question

我正在尝试在用户输入值并点击计算时计算函数的真因数。我能够让结果显示在 HTML 一侧，但是该函数不会计算适当的除数，而是仅采用 "sum" 的值。我做错了什么？

function sumOfProperDivisors() {
  return sum;
}

var input = document.getElementById("input").value;
var sum = 0;

{
  for (i = 1; i <= input; i++)
    if (input % i == 0)
      sum = sum + i;
}

function display() {

  document.querySelector("div").innerHTML = "<b> Sum = " + sumOfProperDivisors();

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sum of Prop. Div.</title>
  <h2> Sum of Proper Divisors </h2>
</head>

<body style="background-color:teal;">

  <p> Enter a Positive Integer (N): </p>
  <input type="number" id="input">

  <p><button onclick="display()">Calculate the Sum of Divisors</button></p>

  <div></div>

  <script src="sumOfPDivs.js"></script>

</body>

</html>

Answer 1

将你的计算逻辑移动到 sumOfProperDivisors() 函数中，如下所示：-

function sumOfProperDivisors() {
  var input = document.getElementById("input").value;
  var sum = 0;
  for (i=1; i<=input; i++){
    if (input%i==0){
      sum = sum + i;
    }
  }
  return sum;
}

function display(){
  document.querySelector("div").innerHTML = "<b> Sum = " + sumOfProperDivisors();
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sum of Prop. Div.</title>
<h2> Sum of Proper Divisors </h2>
</head>
<body style="background-color:teal;">

<p> Enter a Positive Integer (N): </p>
<input type="number" id="input">

<p><button onclick="display()">Calculate the Sum of Divisors</button></p>

<div></div>

<script src="sumOfPDivs.js"></script>

</body>
</html>

注意：- 因为逻辑在函数之外所以实际上它根本不起作用

Answer 2

你的函数 sumOfProperDivisors() 应该是这样的：

    function sumOfProperDivisors(){
     var input = document.getElementById("input").value;
     var sum = 0;
     {
        for (i=1; i<=input; i++)
        if (input%i==0)
        sum = sum + i;
        return sum; 
    }

由于你计算和的算法在函数之外，所以它根本不起作用。

Answer 3

当你的页面加载时，你的文本框将没有值，页面加载时会计算sum，因为计算sum的代码在任何函数之外，所以最好把代码放在在函数 sumOfProperDivisors 中，以便它在每次单击时从文本框中获取值，然后计算总和。

客户端 Javascript 按钮不起作用？

Client Side Javascript Button Not Working?

html

javascript

jquery

client

client-side