堆棧內存溢出
  簡體   English   中英

如何使用 JavaScript 中的 getElementById 方法為變量分配一個數字

[英]How can I assign a number for a variable by using getElementById method in JavaScript

 原文  2023-01-02 14:37:33  8   6    javascript/ html

問題描述

我無法從類型為“文本”的文本輸入中分配一個數字（我知道我可以使用數字類型，但這是被要求的）來計算值並將該值設置為另一個文本輸入

這是我的 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 的新手，而且我的英語不好，請指導我。

6 個解決方案

解決方案1
 2 已采納  2023-01-02 14:48:35

問題是變量在 function 之外，要將輸入轉換為數字，您可以使用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
}

解決方案2
 0  2023-01-02 14:45:38

您正在訪問該值兩次。 如果您從結果變量中刪除值，代碼應該可以工作:)

解決方案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-每次運行showResult() function 時都應該訪問 HTML 元素，因為第一次輸入的值可以更改以進行新計算，並且每次都需要獲取新值。 如果你在外面做它只會做一次並且兩個元素的值都將為空。

2-獲取 DOM 元素而不僅僅是值。 如果您將值存儲在一個變量中，那么您確實會獲得該值，但是您將無法將求和結果分配給您的輸入元素，除非您在計算后再次獲得該元素，這是毫無意義的，因為您只能執行一次.

3- parseFloat或parseInt將您從輸入中獲得的字符串值轉換為數字並獲得預期結果，否則如果您輸入10並按下按鈕，您將獲得1010而不是20 ，因為它將從輸入將是一個字符串而不是數字，它將連接兩個值

解決方案4
 0  2023-01-02 14:48:39

您使用Number()將文本值轉換為數字是正確的。 但是，您正在為input變量和result變量而不是元素賦值。 因此，當您調用showResult function 時，您使用的是以前的值。

您需要做的是將元素存儲在這些變量中，並在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() 。

解決方案5
 0  2023-01-02 14:49:17

你應該在 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

在一行中執行此操作的一種更直接的方法是將加法傳遞給 function 並將其分配給結果本身。 這里的問題不是在 function 內部聲明變量，而是在 function 外部聲明它們。當您調用 function 時， 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我如何使用javascript變量為附近的地方分配類型 javascript-在getElementById中使用變量 我如何記錄變量的 getElementbyID？ 如何使用JavaScript在if語句中將變量與數字進行比較？ 僅使用JavaScript，如何查詢Google工作表並將單個單元格的值分配為JavaScript變量？ 不能在if語句Javascript中為變量分配數字 如何為輸入框分配值？ 使用getElementById 我可以將 getElementbyId 轉換為數字以在 JavaScript 中進行數學運算嗎？ 如何在JavaScript中為數組中的每個對象分配一個隨機數？ 如何為JavaScript變量分配坐標，並使用moveTo和lineTo在這些變量周圍繪制線？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM