Javascript, переменная обновления при изменении ввода

Question

Я не очень разбираюсь в JavaScript (это моя первая реальная вещь, которую я сделал с ней), поэтому мой синтаксис, вероятно, ужасен. Я пытаюсь обновить 5 переменных при каждом изменении поля ввода, однако по какой-то причине они просто не будут обновляться! Я Googled для решений, но ничего, кажется, работает

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