Javascript 函数无法更新变量

Question

我正在尝试在单击时更新 ID 为 'cost' 的按钮的值。这是我的脚本：

<script>
    var costObj = document.getElementById('cost');
    function change() {
        costObj.value = 100;
    }
</script>

这里是输入 html。

<input type = number id = 'cost' onclick = 'change()'>

如果说函数更改中的 costObj 为 null 是行不通的，但将 costObj 声明放在函数中似乎可行。为什么会这样？我认为如果没有声明，函数将在函数外部寻找声明，就像具有原始类型的 var 一样。这动摇了我的概念性理解。提前致谢！

Answer 1

放在js代码下面，将onClick = 'change()'替换为onClick = "change()"

Answer 2

当您的代码像这样放入 Stack Overflow“片段”时，它会按预期工作：

var costObj = document.getElementById('cost');
function change() {
    costObj.value = 100;
}

<input type = number id = 'cost' onclick = 'change()'>

我认为罪魁祸首很可能是@Musa 在评论中指出的内容：确保您的脚本出现在 <input> 标记之后，否则 cost 元素在您尝试获取对它的引用时不存在。

它在代码段中有效，因为 JavaScript 代码在 HTML 代码之后加载。请注意，Stack Overflow 对代码片段的介绍有点误导，因为它在 JavaScript.

下方显示了 HTML

为了帮助说明这一点，这里有两个版本的代码段，所有内容都包含在 HTML 部分中，而不是使用单独的 JavaScript 部分。这样我们就可以控制先加载HTML还是JavaScript代码。

这个失败了，因为 script 包含在 input 标签之前：

<script>
    var costObj = document.getElementById('cost');
    function change() {
        costObj.value = 100;
    }
</script>

<input type = number id = 'cost' onclick = 'change()'>

这个成功了，因为 script 包含在之后 input 标签：

<input type = number id = 'cost' onclick = 'change()'>

<script>
    var costObj = document.getElementById('cost');
    function change() {
        costObj.value = 100;
    }
</script>

Answer 3

你应该尝试在对象上添加事件侦听器并将 var 更改为 const 以获得最佳方式并且不要在 html 代码下方使用 onclick 因为它看起来像调用函数的旧方法只是执行函数在侦听器事件中

例如

    const costObj = document.getElementById('cost');
    costObj.addEventListener("click" , function(){
        change();
    }); 
    
        function change() {
            costObj.value = 100;
        }

<input type="text" id="cost" />

Javascript 函数无法更新变量

Javascript function cannot update variable

javascript

scope