我正在尝试重温我的 JS，我想要它以便用户可以输入他们的名字和姓氏以及两个数字。当他们单击按钮时，我希望文本更改为“你好姓名!你的总和是数字!”
我的代码不工作，有人能告诉我我的问题出在哪里吗？
<html>
<head>
<meta charset="UTF-8">
<title>JS Review</title>
<style>
body{background: #8ADFB6; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
#container{background: white; padding: 30px; width: 760px; margin: 0 auto;}
#output{
padding: 10px; margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Using Form Elements with Javascript</h1>
<p>We can utilize user input to create feedback</p>
First Name: <input id="first">
Last Name: <input id="last">
<p></p>
Number 1: <input id="num1">
Number 2: <input id="num2">
<p></p>
<button onClick="Respond()">Respond</button>
<div id="output"></div>
</div>
<script>
function myFunction(){
var a = document.getElementById("first").value;
var b = document.getElementById("last").value;
var c = document.getElementById("num1").value;
var d = document.getElementById("num2").value;
var n= document.getElementById("sum").value;
var n= c + d;
document.getElementById("Respond").innerHTML="Respond";
}
document.getElementById("Respond").innerHTML = "Hello! Your sum is !";
</script>
</body>
</html>
最佳答案
你有很多问题。
首先，您尝试进行数学运算但使用的是字符串值。你不能这样做，否则他们会合并并生成 3 + 1 = 31 而不是 4。你可以通过解析 float 来解决这个问题，现在我建议的一件事是确认它们是数字，这样你就不会做无效的事情解析。
if(isNaN(c) || isNaN(d) {
alert('Invalid Input');
}else{
var n= parseFloat(c) + parseFloat(d);
document.getElementById("Respond").innerHTML = "Hello! Your sum is " + n;
}
接下来，您正在调用函数响应，但该函数不存在。确实存在的是 myFunction，因此您有几个选择。
要么更新您 JS 中的这一行以使用 Respond 作为函数名称:
function myFunction(){
应该是:
function Respond(){
或者更新您的 HTML 按钮以使用正确的函数名称:
<button onClick="Respond()">Respond</button>
应该是:
<button onClick="myFunction()">Respond</button>
接下来，您要查找 ID 为 respond 的元素，但该元素不存在。您又一次使用了错误的 ID。您需要在那里使用输出。
这一行:
document.getElementById("Respond").innerHTML = "Hello! Your sum is !";
应该是:
document.getElementById("output").innerHTML = "Hello! Your sum is " + n + "!";
接下来，您试图获取 ID 为 sum 的某物的值，但它根本不存在。
直接删除这一行:
var n= document.getElementById("sum").value;
最后，为什么你的值更新器在函数调用之外？该更新程序需要位于函数内部，其中包含实际获取值的内容。如果不这样做，您将永远无法更新字符串。
<html>
<head>
<meta charset="UTF-8">
<title>JS Review</title>
<style>
body{background: #8ADFB6; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
#container{background: white; padding: 30px; width: 760px; margin: 0 auto;}
#output{
padding: 10px; margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Using Form Elements with Javascript</h1>
<p>We can utilize user input to create feedback</p>
First Name: <input id="first">
Last Name: <input id="last">
<p></p>
Number 1: <input id="num1">
Number 2: <input id="num2">
<p></p>
<button onClick="myFunction()">Respond</button>
<div id="output"></div>
</div>
<script>
function myFunction(){
var a = document.getElementById("first").value;
var b = document.getElementById("last").value;
var c = document.getElementById("num1").value;
var d = document.getElementById("num2").value;
if(isNaN(c) || isNaN(d)) {
alert('Invalid Input');
}else{
var n= parseFloat(c) + parseFloat(d);
document.getElementById("output").innerHTML = "Hello! Your sum is " + n;
}
}
</script>
</body>
</html>因此，虽然我在这里给了您相当多的内容供您查看，但您确实需要花一点时间来检查您的代码。如果您放慢速度并阅读您正在做的事情，您有很多问题本来可以解决的。
关于Javascript 改变表单元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54099294/