Question

我对JavaScript不是很有经验（这是我用它做的第一个真实的东西），所以我的语法可能很糟糕。每当输入框被更改时，我都会尝试更新5个变量，但出于某种原因，他们只是不会更新！我已经用谷歌搜索解决方案，但似乎没有任何效果

document.getElementById("name").addEventListener("keyup", updateName);
document.getElementById("id").addEventListener("keyup", updateID);
document.getElementById("quantity").addEventListener("keyup", updateNumber);
document.getElementById("buybase").addEventListener("keyup", updateBuy);
document.getElementById("sellbase").addEventListener("keyup", updateSell);

这是一个JSFiddle http://jsfiddle.net/q1w6v12u/

这是现场网站 http://ts-mc.net/pricing/chest.html

Answer 1

您已将所有这些变量声明为局部变量（因为您在方法中使用了var），它只存在于声明它们的方法中，将它们声明为全局变量。

所以现在你有一个全局变量和一个仅存在于方法内部的局部变量，因此你对方法内部变量所做的任何更改都不会反映在全局范围内的变量中。

function updateName() {
    ITEMNAME = document.getElementById("name").value;
}

Answer 2

为什么要声明变量两次：

var ITEMNAME = "NULL";//first
function updateName() {
    var ITEMNAME = document.getElementById("name").value;
    ^^^==========>second
}

这样做：

var ITEMNAME = "NULL";
function updateName() {
    ITEMNAME = document.getElementById("name").value;
}

Answer 3

要解决您未更新的变量的直接问题，您可以将JS更改为：

...    
        function updateName() {
            ITEMNAME = document.getElementById("name").value;
        }

        function updateID() {
            ITEMID = document.getElementById("id").value;
        }

        function updateNumber() {
            NUMBER = document.getElementById("quantity").value;
        }

        function updateBuy() {
            BUYCOST = document.getElementById("buybase").value;
        }

        function updateSell() {
            SELLCOST = document.getElementById("sellbase").value;
        }

        function Replace() {
            BUYCOST = BUYCOST * 4 * NUMBER;
            SELLCOST = SELLCOST / 4 * NUMBER;

            var DONE = BASE.replace(/ITEMNAME/igm, ITEMNAME);
            var DONE = DONE.replace(/ITEMID/igm, ITEMID);
            var DONE = DONE.replace(/NUMBER/igm, NUMBER);
            var DONE = DONE.replace(/BUYCOST/igm, BUYCOST);
            var DONE = DONE.replace(/SELLCOST/igm, SELLCOST);
            document.getElementById("output").innerHTML = DONE;
        }

问题的原因是由于您在函数范围内重新定义变量而不是使用父级中已存在的变量。

您的HTML也存在一些问题，但没有正确终止您的元素，例如<input ... />

Javascript，输入更改时更新变量

3 个答案: