Добавление номеров вверх

Question

Я использую onChange Listener в выпадающем меню, On change. Я хочу добавить все числа в переменную totalCost, но ответ undefined20 или какой-либо другой номер. Он не складывается.

<p id="test"></p> 
    <p id="test2"></p> 
    <select id="first" onChange="myFunction()"> 
    <option></option> 
    <option value="20">Test1</option> 
    <option value='100'>Test2</option> 
    <option value='200'>Test3</option> 

    </select> 

    <script> 
document.getElementById("test").onchange = function() {myFunction()}; 


function myFunction(){ 
    var x = document.getElementById("first").value; 
    var totalCost; 
    totalCost += x; 
    document.getElementById("test").innerHTML = x; 
    document.getElementById("test2").innerHTML = totalCost; 
    } 

</script> 

Answer 1

undefined20 является результатом:

totalCost += x 

Поскольку переменная, totalCost не инициализируется со значением; чтобы исправить то, что вам нужно всего лишь использовать:

var totalCost = 0; 

totalCost += parseInt(x, 10); 

Причиной parseInt() является то, что все атрибуты HTML считаются строки по умолчанию, и должны - если вы хотите ряд - преобразовать в число, используя либо:

• +x (унарный + оператор),
• Number(x),
• parseInt(x, 10) (10 это числовое основание, десять для десятичного-б номера телефонов),
• parseFloat(x).

document.getElementById("test").onchange = function() { 
 
    myFunction() 
 
}; 
 

 

 
function myFunction() { 
 
    var x = document.getElementById("first").value, 
 
     totalCost = 0; 
 
    totalCost += parseInt(x, 10); 
 
    document.getElementById("test").innerHTML = x; 
 
    document.getElementById("test2").innerHTML = totalCost; 
 
}

<p id="test"></p> 
 
<p id="test2"></p> 
 
<select id="first" onChange="myFunction()"> 
 
    <option></option> 
 
    <option value="20">Test1</option> 
 
    <option value='100'>Test2</option> 
 
    <option value='200'>Test3</option> 
 

 
</select>

Ссылки:

• Number() constructor.
• parseFloat().
• parseInt().
• Unary + operator.

Answer 2

написав эту строку: var totalCost; вы переопределить вар и сбросить его значение каждый раз. вместо этого определите его как-то снаружи функция без ключевого слова var. Таким образом, эта переменная будет глобальной.

также не забудьте установить его начальное значение на ноль.