如何用JavaScript的getElementById处理文本输入框数字赋值与计算？

问题根源分析 #

你的代码存在三个核心错误：

• 变量初始化时机错误：页面加载完成时就获取输入框的value，此时用户还未输入内容，后续点击按钮时使用的始终是初始的空值/NaN。
• 错误获取结果元素：你把result变量赋值为输入框的value（字符串类型），而非DOM元素本身，导致无法通过result.value设置输入框内容。
• 数字转换时机错误：应该在用户点击按钮时，实时获取当前输入的内容并转换为数字，而非页面加载时就执行转换。

修正后的JavaScript代码 #

// 仅获取DOM元素，不提前读取value
var inputElement = document.getElementById("txtInput");
var resultElement = document.getElementById("result");

function showResult(){
    // 点击按钮时实时获取输入值并转为数字
    var inputValue = Number(inputElement.value);
    // 处理非数字输入的情况，避免显示NaN
    resultElement.value = !isNaN(inputValue) ? inputValue + 10 : "请输入有效数字";
}

额外的HTML优化建议 #

建议将script标签移至body末尾，确保页面DOM渲染完成后再执行JS代码，避免出现无法获取元素的问题：

<!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"> 
    <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末尾，确保DOM已加载 -->
    <script src="./ind.js"></script> 
</body>

</html>

内容的提问来源于stack exchange，提问作者Phạm Phú Khánh