为什么这个javascript代码没有输出？我错过了什么？

-1

下面是我编写的一些示例代码，因为我有一个难以工作的任务，现在，我甚至无法使其工作。试图显示将两个数字相加的输出，我错过了什么？为什么这个javascript代码没有输出？我错过了什么？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sample</title> 
    <script type="text/javascript"> 
     function Add() { 
      var n1 = document.getElementById("numOne").value; 
      var n2 = document.getElementById("numTwo").value; 
      var total = n1 + n2; 

      document.getElementById("output").innerHTML = total; 
     } 
    </script> 
</head> 
<body> 
    <h1>Calc</h1><br /> 
    <form method="post" action=""> 
     NUM 1: <input type="number" name="numOne" id="numOne" /><br /> 

     NUM 2: <input type="number" name="numTwo" id="numTwo" /><br /> 

     <input type="button" value="Add" onclick="ADD()" /><br /> 

     Result: <label id="output"></label> 
    </form> 
</body> 
</html>

来源

2017-10-08 Tanner Plato

'ADD（）'！='Add（）'。你应该学习一些基本的调试技巧，比如使用浏览器的开发工具，尤其是控制台。它会立即向你显示这样的事情。您还将两个字符串连接在一起，因此您应该在输出结果之前将它们转换为数字。 – j08691

'onclick =“Add（）”'？ – PredatorIWD

“这个问题是由于无法再现的问题或简单的印刷错误造成的。” - 投票结束，作为题外话题。 – Quentin

您需要在引用它时匹配函数名称的大小写。 ADD()应该是Add()。请向您的开发人员控制台查询错误消息。

另外，如果你想总结这两个数字，你需要首先将它们从字符串转换为不连接。

function Add() { 
     var n1 = document.getElementById("numOne").value; 
     var n2 = document.getElementById("numTwo").value; 
     var total = parseInt(n1, 10) + parseInt(n2, 10); 

     document.getElementById("output").innerHTML = total; 
    }

在这里，我用parseInt()与10基数的数字字符串转换为数字。

来源

2017-10-08 18:25:54 llama

ADD() =>变化到Add()（JavaScript是区分大小写）

函数字符串转换为数字。完美运行，运行并看看。（如果你不把这个，和你的输入，说，5和6，那么你的输出就会56（字符串连接），而不是11）

<head> 
 
    <title>Sample</title> 
 
    <script type="text/javascript"> 
 
     function Add() { 
 
      var n1 = document.getElementById("numOne").value; 
 
      var n2 = document.getElementById("numTwo").value; 
 
      var total = Number(n1) + Number(n2); // Number() function 
 

 
      document.getElementById("output").innerHTML = total; 
 
     } 
 
    </script> 
 
</head> 
 
<body> 
 
    <h1>Calc</h1><br /> 
 
    <form method="post" action=""> 
 
     NUM 1: <input type="number" name="numOne" id="numOne" /><br /> 
 

 
     NUM 2: <input type="number" name="numTwo" id="numTwo" /><br /> 
 

 
     <input type="button" value="Add" onclick="Add()" /><br /> 
 

 
     Result: <label id="output"></label> 
 
    </form> 
 
</body>

来源

2017-10-08 18:28:57 Miraj50

谢谢你，现在输出显示。但我的任务仍然没有工作。第2轮？ –

对不起，我没有得到你。第2轮？!!尝试添加'html'标签和'<！DOCTYPE html>'，如果您正在使用PC而不是像jsfiddle这样的地方。 – Miraj50

函数名是区分大小写的，则需要更改此：

<input type="button" value="Add" onclick="ADD()" /><br />

要这样：

<input type="button" value="Add" onclick="Add()" /><br />

来源

2017-10-08 18:29:30

为什么这个javascript代码没有输出？我错过了什么？

回答

相关问题