CODEWITHSUNDEEP
javascript
Jerred Shepherd
Jerred Shepherd

Reputation: 560

Javascript, Update variable on input change

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

Upvotes: 1

Views: 3878

Answers (3)

Chris du Preez
Chris du Preez

Reputation: 554

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 ... />

Upvotes: 1

Manwal
Manwal

Reputation: 23836

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

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388446

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

Upvotes: 2

Related Questions