如何使用JavaScript中的getElementById方法为变量赋值

a5g8bdjr 于 2023-01-04 发布在 Java

关注(0)|答案(6)|浏览(387)

我无法从类型为"文本"的文本输入中分配数字（我知道我可以使用数字类型，但这是必需的），无法计算值并将该值设置为另一个文本输入
这是我的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，而且我的英语不好，请指导我。

JavaScript

来源：https://stackoverflow.com/questions/74983680/how-can-i-assign-a-number-for-a-variable-by-using-getelementbyid-method-in-javas

6条答案

按热度按时间

7rtdyuoh1#

问题是变量在函数之外，要将输入转换为数字，可以使用**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
}

赞(0）回复(0）举报 2023-01-04

goqiplq22#

你访问了两次这个值，如果你从result-variable中删除.value，代码应该可以工作：）

赞(0）回复(0）举报 2023-01-04

svujldwt3#

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

赞(0）回复(0）举报 2023-01-04

wpcxdonn4#

使用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()。

赞(0）回复(0）举报 2023-01-04

chy5wohz5#

一个更直接的方法是将加法传递给函数并将其赋值给结果本身。这里的问题不是在函数内部声明变量，而是在函数外部声明变量。当你调用函数时，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>

赞(0）回复(0）举报 2023-01-04

k4aesqcs6#

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，因为从输入中获得的值将是字符串而不是数字，它将连接两个值

赞(0）回复(0）举报 2023-01-04

我来回答

如何使用JavaScript中的getElementById方法为变量赋值

6条答案

相关问题

热门标签

最新问答