如何使用 JavaScript 中的 getElementById 方法为变量分配一个数字答案

【问题标题】：How can I assign a number for a variable by using getElementById method in JavaScript如何使用 JavaScript 中的 getElementById 方法为变量分配一个数字
【发布时间】：2023-01-02 23:12:05
【问题描述】：

我无法从类型为“文本”的文本输入中分配一个数字（我知道我可以使用数字类型，但这是被要求的）来计算值并将该值设置为另一个文本输入

这是我的 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>

How it looks like

还有我的 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 的新手，而且我的英语不好，请指导我。

【问题讨论】：

scaler.com/topics/javascript-program-to-add-two-numbers
您的 input 和 result 变量应初始化为引用元素，而不是元素的值。
var result = document.getElementById("result").value 应该只是 var result = document.getElementById("result")。您需要 DON 元素，而不是结果。

标签： javascript html

【解决方案1】：

问题是变量在函数之外，要将输入转换为数字，您可以使用解析整数()要么解析浮点数()职能。

function showResult(){
        var input = document.getElementById("txtInput").value;
    var result = document.getElementById("result");
    result.value = parseInt(input) + 10
}

【讨论】：

【解决方案2】：

您正在访问该值两次。如果您从结果变量中删除 .value，代码应该可以工作:)

【讨论】：

【解决方案3】：

你应该在函数内声明变量，但你在函数外声明它。当您调用函数 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">

【讨论】：

【解决方案4】：

使用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">

此外，根据 application，您可能需要考虑使用 parseFloat()。

【讨论】：

【解决方案5】：

在单行中执行此操作的一种更直接的方法是将加法传递给函数并将其分配给结果本身。这里的问题不是在函数内部声明变量，而是在函数外部声明它们。当您调用函数 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>

【讨论】：

【解决方案6】：

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>

每次运行showResult() 函数时都应该访问 HTML 元素。如果你在外面做，它会做一次，并且两个元素的值都将为空，并且还得到 DOM 元素而不仅仅是值，那么你可以使用这些值，当然还有 parseFloat 或 parseInt 来转换您从输入中获得的字符串值转换为数字并获得预期结果，否则如果您输入 10 并按下按钮，您将获得 1010 而不是 20，因为它将从输入中获得的值将是一个字符串而不是一个数字，它将连接两个值

【讨论】：