我在从类型为"；文本"；(我知道我可以使用数字类型，但这是必需的)来计算值，并将该值设置为另一个文本输入
这就是我的HTML文件的样子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="./ind.js"></script>
<title>Document</title>
</head>
<body>
Input: <input id="txtInput" type="text">
<input onclick="showResult()" type="button" value="Show Result"> <br> <br>
The number after adding 10 is:
<input id="result" type="text">
</body>
</html>
它看起来像
我的JavaScript代码：
var input = document.getElementById("txtInput").value;
var result = document.getElementById("result").value;
function showResult(){
result.value = input + 10;
}
我试着用Number()方法铸造赋值，如下所示：
var input = Number(document.getElementById("txtInput").value);
var result = document.getElementById("result").value;
function showResult(){
result.value = input + 10;
}
但没有成功。
我做错了什么，我是JS和StackOverFlow的新手，我的英语也不好，请指导我。
问题是变量在函数之外，要将输入强制转换为数字，可以使用parseInt()或parseFloat()函数。
function showResult(){
var input = document.getElementById("txtInput").value;
var result = document.getElementById("result");
result.value = parseInt(input) + 10
}
它也可以使用以下两个变量作为全局变量：
const input = document.getElementById("txtInput");
const result = document.getElementById("result");
function showResult(){
result.value = parseInt(input.value) + 10
}
您正在访问该值两次。如果从结果变量中删除.value，代码应该可以工作：)
您应该在函数内部声明变量，但您在函数外部声明变量。当您调用函数txtInput时，值为0。
function showResult(){
var in_put = Number(document.getElementById("txtInput").value);
var result = document.getElementById("result");
result.value = in_put + 10;
}Input: <input id="txtInput" type="text">
<input onclick="showResult()" type="button" value="Show Result"> <br> <br>
The number after adding 10 is:
<input id="result" type="text">使用Number()将文本值转换为数字是正确的。但是，您将值指定给input和result变量，而不是元素。因此，当您调用showResult函数时，您正在使用以前的值。
您需要做的是将元素存储在这些变量中，而在showResult中使用当前值
var input = document.getElementById("txtInput");
var result = document.getElementById("result");
function showResult(){
result.value = Number(input.value) + 10;
}Input: <input id="txtInput" type="text">
<input onclick="showResult()" type="button" value="Show Result"> <br> <br>
The number after adding 10 is:
<input id="result" type="text">此外，根据应用程序的不同，您可能需要考虑使用parseFloat()。
在一行中实现这一点的一种更直接的方法是将加法传递给函数，并将其分配给结果本身。这里的问题不是在函数内声明变量，而是在函数外声明变量。调用函数时，txtInput的值始终为0。
请在下面找到所附的工作代码：
var result = document.getElementById("result");
function showResult(){
result.value = Number(document.getElementById("txtInput").value)+10;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="./ind.js"></script>
<title>Document</title>
</head>
<body>
Input: <input id="txtInput" type="text">
<input onclick="showResult()" type="button" value="Show Result"> <br> <br>
The number after adding 10 is:
<input id="result" type="text">
</body>
</html>function showResult(){
var input = document.getElementById("txtInput");
var result = document.getElementById("result");
var sum = parseFloat(input.value) + 10;
result.value= sum;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="./ind.js"></script>
<title>Document</title>
</head>
<body>
Input: <input id="txtInput" type="text">
<input onclick="showResult()" type="button" value="Show Result"> <br> <br>
The number after adding 10 is:
<input id="result" type="text">
</body>
</html>
1-每次运行showResult()函数时，您都应该访问HTML元素，因为第一次输入的值可以更改为新的计算，并且每次都需要获得新的值。如果在外部执行，它将只执行一次，并且两个元素的值都为空。
2-获取DOM元素，而不仅仅是值。如果你把值存储在一个变量中，那么你确实会得到这个值，但除非你在计算后再次得到这个元素，否则你将无法将求和结果分配给你的输入元素，这是毫无意义的，因为你只能做一次。
3-parseFloat或parseInt将您从输入中获得的字符串值转换为数字并获得预期结果，否则，如果您键入10并按下按钮，您将获得1010而不是20，因为它从输入中得到的值将是字符串而不是数字，它将连接两个值