如何使用 JavaScript 中的 getElementById 方法为变量分配一个数字
[英]How can I assign a number for a variable by using getElementById method in JavaScript
问题描述
I am having trouble assigning a number from a text input which type is "text" (I know I can use number type but this is requested) to calculate the value and set that value to another text input
我无法从类型为“文本”的文本输入中分配一个数字（我知道我可以使用数字类型，但这是被要求的）来计算值并将该值设置为另一个文本输入
This is what my HTML file look like:这是我的 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>
And my JavaScript code:还有我的 JavaScript 代码：
var input = document.getElementById("txtInput").value;
var result = document.getElementById("result").value;
function showResult(){
result.value = input + 10;
}
I tried casting the assigned value with Number() method like this:我尝试使用 Number() 方法强制转换赋值，如下所示：
var input = Number(document.getElementById("txtInput").value);
var result = document.getElementById("result").value;
function showResult(){
result.value = input + 10;
}
But it didn't work out.但没有成功。
What am I doing wrong, I'm new to JS and StackOverFlow, also my English is bad, please guide me.我做错了什么，我是 JS 和 StackOverFlow 的新手，而且我的英语不好，请指导我。
6 个解决方案
解决方案1
2 已采纳 2023-01-02 14:48:35
The problem was that the variables were outside the function, and to cast the input to number you can use the parseInt() or parseFloat() functions.问题是变量在 function 之外，要将输入转换为数字，您可以使用parseInt()或parseFloat()函数。
function showResult(){
var input = document.getElementById("txtInput").value;
var result = document.getElementById("result");
result.value = parseInt(input) + 10
}
It could also be used as follows using the two variables as globals:也可以将两个变量用作全局变量，如下所示：
const input = document.getElementById("txtInput");
const result = document.getElementById("result");
function showResult(){
result.value = parseInt(input.value) + 10
}
解决方案2
0 2023-01-02 14:45:38
You're accessing the value twice.您正在访问该值两次。 If you remove.value from the result-variable, the code should work:)如果您从结果变量中删除值，代码应该可以工作:)
解决方案3
0 2023-01-02 14:47:58
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- you should access the HTML element each time you run your showResult() function, because the value from your first input can be changed for a new calculation and you need to get that new value everytime. 1-每次运行showResult() function 时都应该访问 HTML 元素，因为第一次输入的值可以更改以进行新计算，并且每次都需要获取新值。 If you do it outside it will do it only once and the value will be empty for both elements.如果你在外面做它只会做一次并且两个元素的值都将为空。
2- get the DOM element not just the value. 2-获取 DOM 元素而不仅仅是值。 If you store the value inside a variable then you will get the value indeed but you won't be able to assign your sum result to your input element unless you get the element again after your calculations which is pointless since you can just do it once.如果您将值存储在一个变量中，那么您确实会获得该值，但是您将无法将求和结果分配给您的输入元素，除非您在计算后再次获得该元素，这是毫无意义的，因为您只能执行一次.
3- parseFloat or parseInt to convert the string value you get from your input into a number and get the expected result, otherwise if you for example type 10 and press the button you will get 1010 instead of 20 since the value that it will get from input will be a string not a number, it will concatenate both values 3- parseFloat或parseInt将您从输入中获得的字符串值转换为数字并获得预期结果，否则如果您输入10并按下按钮，您将获得1010而不是20 ，因为它将从输入将是一个字符串而不是数字，它将连接两个值
解决方案4
0 2023-01-02 14:48:39
You are correct about converting text value into number with Number() .您使用Number()将文本值转换为数字是正确的。 However, you are assigning values to input and result variables and not the elements.但是，您正在为input变量和result变量而不是元素赋值。 So when you call showResult function you are working with previous values.因此，当您调用showResult function 时，您使用的是以前的值。
What you need to do is store the elements in these variables and in showResult work with current values instead您需要做的是将元素存储在这些变量中，并在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"> Also, depending on the application , you might want to consider using parseFloat() .此外，根据应用程序，您可能需要考虑使用parseFloat() 。
解决方案5
0 2023-01-02 14:49:17
you should declare variables inside function but you are declaring it outside function. when you invoke function txtInput value is 0.你应该在 function 内部声明变量，但你在 function 之外声明它。当你调用 function 时，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">
解决方案6
0 2023-01-02 14:54:16
A more straightforward way of doing this in one-liner is to pass the addition to the function and assign it to the result itself.在一行中执行此操作的一种更直接的方法是将加法传递给 function 并将其分配给结果本身。 The problem here is not declaring the variables inside the function but you are declaring them outside the function. when you invoke the function txtInput value is always 0.这里的问题不是在 function 内部声明变量，而是在 function 外部声明它们。当您调用 function 时， txtInput值始终为 0。
Please find the attached working code below:请在下面找到随附的工作代码：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.