Question

<html>
<head>
<title>JavaScript - using function</title>
<script>
function add(){
var value1=document.getElementById("n1").value;
var value2=document.getElementById("n2").value;
document.getElementById("result").value=parseFloat(value1)+parseFloat(value2);
}
</script>
</head> 
<body>
<label>First Number:<input type="number" id="n1"/></label>
<label>Second Number:<input type="number" id="n2"/></label>
<input type="button" value="Add" onClick="add()" />
<p>
Result = <span id="result" ></span>
</p>
</body>
</html>

我是JavaScript的新手，想要创建一个添加数字的脚本。按“添加”按钮后，我无法显示结果。如何显示结果？

Answer 1

这里有两件事错了......

1）

<input type="button" value="Add" />将其更改为

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

此外，

2）

document.getElementById("result").value=parseFloat(value1)+parseFloat(value2);

到

document.getElementById("result").innerHTML=parseFloat(value1)+parseFloat(value2);

PS：这不是一个任务解决网站：P

Answer 2

首先，你应该改变

document.getElementById("result").value = value1 + value2

To This：

document.getElementById("result").innerHTML = n1 + n2

因为value代表＆lt;的属性值。输入＆gt;，而不是写的文字

标签中的

。

其次，将按钮代码更改为：

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

这＆＃34; onclick＆＃34;是javascript中的事件，

这意味着点击按钮＆＃34;添加＆＃34;它执行名为＆＃34; add（）＆＃34;。

的功能

如果您是Javascript的新手，您将了解所有内容。

只是耐心等待。

Answer 3

它适用于以下更改 - ＆GT;使用onclick事件调用add函数 - ＆GT;使用innerhtml代替值

<html>
<head>
<title>JavaScript - using function</title>
<script>
    function add(){
        var value1=document.getElementById("n1").value;
        var value2=document.getElementById("n2").value;
        console.log(value1,value2)
        document.getElementById("result").innerHTML=parseFloat(value1)+parseFloat(value2);
    }
</script>
</head>
<body>
<label>First Number:<input type="number" id="n1"/></label>
<label>Second Number:<input type="number" id="n2"/></label>
<input type="button" value="Add" onclick="add()"/>
<p>
Result = <span id="result" ></span>
</p>
</body>
</html>

希望这有帮助

Answer 4

最好将js放在文档的末尾 - 同样注意到onclick处理程序需要调用该函数。我还整理了一些代码。

<html>
<head>
<title>JavaScript - using function</title>
<style>label{display:block}</style>
</head> 
<body>
  <label>First Number:<input type="number" id="n1"/></label>
  <label>Second Number:<input type="number" id="n2"/></label>
  <input type="button" value="Add" onclick="add()">
  <p>Result = <span id="result" ></span></p>

<script>
function add(){
  var value1=parseFloat(document.getElementById("n1").value);
  var value2=parseFloat(document.getElementById("n2").value);
  var total= value1 + value2;
  document.getElementById("result").innerText=total;
}
</script>

</body>
</html>

通过javascript添加数字

4 个答案: