Javascript, Update variable on input change

Question

I'm not very experienced with JavaScript (This is my first real thing I've made with it), so my syntax is probably horrendous. I'm trying to get 5 variables to update whenever the input box is changed, however for some reason, they just won't update! I've Googled for solutions but nothing seems to work

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);

Here's a JSFiddle http://jsfiddle.net/q1w6v12u/

Here's the live site http://ts-mc.net/pricing/chest.html

Arun P Johny · Accepted Answer · 2015-02-16 06:39:59Z

2

You have declared all those variables as local variables(since you have used var inside the method), which exists only inside the methods in which they are declared, declare them as global variables.

So now you have a global variable and a local one which exists only inside the method, so any changes you have done to the variable inside the method will not get reflected in the variable which is in the global scope.

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

answered Feb 16, 2015 at 6:39

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manwal · Accepted Answer · 2015-02-16 06:41:48Z

2

Why are you declaring variables twice:

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

Just do this:

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

answered Feb 16, 2015 at 6:41

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

1 Comment

Jerred Shepherd Over a year ago

Thank you! I thought the var was required to redefine the variable.

Chris du Preez · Accepted Answer · 2015-02-16 06:47:04Z

To solve your immediate issue with variables not updating you could change your JS to this:

...    
        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;
        }

The cause of the problem is due to you redefining your variables within function scope instead of using the ones already existing in the parent.

There are some issues with your HTML also, with not terminating your elements properly for example <input ... />

Collectives™ on Stack Overflow

Javascript, Update variable on input change

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related