Question

所以基本上我试着编写一个函数，将用户输入存储到3个变量中，然后将它们加在一起并返回总数。

我认为问题与document.getElementById部分有关，因为如果我只是放入num1 = 5;它似乎有效。

有人能说清楚我做错了吗？感谢。

HTML文件

<!DOCTYPE html>
<html>
<head>
</head>
<body>

    <input type="text" id="n1"/>
    <input type="text" id="n2"/>
    <input type="text" id="n3"/>
    <button onclick="myFunction();updateGraphics();">Click Me</button>

    <p id="test"></p>

    <script src="javascript.js"></script>
</body>
</html>

Javascript文件

function myFunction() {

    num1 = document.getElementById("n1").value;
    num2 = document.getElementById("n2").value;
    num3 = document.getElementById("n3").value;

    var total = num1 + num2 + num3;

    return total;
}

var newTotal = myFunction();

function updateGraphics() {

    return document.getElementById("test").innerHTML = newTotal; 

}

document.getElementById("test").innerHTML = "Your Value Here";

Answer 1

这是因为当你点击按钮时运行myFunction()时，它的返回值会被忽略。你基本上试图部分地使用变量来代替return语句。

更改按钮点击，将myFunction的返回值传递给updateGraphics

function myFunction() {
  var num1 = document.getElementById("n1").value;
  var num2 = document.getElementById("n2").value;
  var num3 = document.getElementById("n3").value;

  return num1 + num2 + num3;
}

function updateGraphics(value) {
  return document.getElementById("test").innerHTML = value;
}

document.getElementById("test").innerHTML = "Your Value Here";

<input type="text" id="n1" />
<input type="text" id="n2" />
<input type="text" id="n3" />
<button onclick="updateGraphics(myFunction());">Click Me</button>

<p id="test"></p>

当然，如果您实际上不需要分离出两个函数，可以将代码从一个函数移动到另一个函数，将它们组合成一个函数。

正如 @Teemu 指出的那样，您的值将作为字符串接收。您可以使用parseFloat()，parseInt()或+，num1和num2上的一元num3运算符作为将其转换为实际数字的方法如果这就是你所期待的。

Answer 2

如果没有发布它不起作用的示例，请将值转换为整数（或浮点数）。当＆＃34;添加＆＃34;时，JavaScript默认为默认值字符串是连接的，即使它实际上是一个数字字符串。

Answer 3

 var newTotal = myFunction();

执行myFunction 一次并设置newTotal。每当你调用 myFunction 时，它都不会更新newTotals值。为此，只需将其声明为外部，然后从函数内部进行更新：

var newTotal;
function myFunction(){
  //whatever
  newTotal = 12;
}

总而言之，您可以像这样重构代码：

function getSum() {

  num1 = + document.getElementById("n1").value;
  num2 = + document.getElementById("n2").value;
  num3 = + document.getElementById("n3").value;

  return num1 + num2 + num3;
}

function updateGraphics(value) {
 return document.getElementById("test").innerHTML = value; 
}

updateGraphics("Your Value Here");

document.getElementByTagName("button")[0].onclick = () => updateGraphics( getSum() );

getSum甚至可以写得更短：

function getSum(){
  return ["n1", "n2"," n3"]
    .reduce((val,id)=>val + +document.getElementById(id),0);
}

Answer 4

暂且不说：那些输入可能不需要ids。您可以完全删除它们或将它们更改为类。然后，您可以使用querySelector和reduce值来获取它们以获得总和 - 就像这样：

let inputs = document.querySelectorAll('.n');
let sum = [...inputs].reduce((p, c) => p + Number(c.value), 0);

<强> DEMO

谁能告诉我为什么这不起作用？

4 个答案: