Арифметика с переменными не работает

Question

По какой-то причине арифметика в функции updateScore(result) не работает должным образом (функция вызывается позже в коде). wins, ties и losses напечатаны как следует, но lives напечатан как NaN. Я знаю, что такое NaN. Я также определил, что переменные по той или иной причине создаются как строки. Мне кажется странным, что он работает для четырех из пяти переменных. Нет никакой последовательности. Я пробовал некоторые преобразования чисел, используя Number(lives), но это тоже не работает. Любые предложения о том, как я могу гарантировать, что переменные будут созданы как числа, и аритмические операции будут работать?

var wins = 0, 
    ties = 0, 
    losses = 0, 
    lives = 5, 
    previouscpuChoice = 0; 

$("#startknapp").click(function(){ 
    var spiller = prompt("Hva heter du?"); 
    $("#userSelect").html(userMenu); 
    $("#result").html("<h4>Velg figur, " + spiller + "</h4>"); 
    $("#status").html('<h4>Liv: <span id="life">' +lives+ '</span> - Seire: <span id="win">' + wins + '</span> - Uavgjort: <span id="tie">' + ties + '</span> - Tap: <span id="lose">' + losses + '</span>'); 
    console.log(typeof "lives"); 
    console.log(typeof "wins"); 
    }); 

function updateScore(result) { 
    tie = document.getElementById("tie"); 
    win = document.getElementById("win"); 
    lose = document.getElementById("lose"); 
    lives = document.getElementById("life"); 
    console.log(typeof "wins"); 
    var imgSrc = "images/" + userChoice + "-" + result + ".png"; 

    if (result === "tie") { 
    ties = ties + 1; 
    tie.innerHTML = ties; 
    $('.result-img').attr('src', 'images/tie.png'); 
    } 

    if (result === "vant") { 
    wins++; 
    $('.result-img').attr('src', imgSrc); 
    } 

    if (result === "tapte") { 
    losses++; 
    lives--; 
    lose.innerHTML = losses; 
    life.innerHTML = lives; 
    $('.result-img').attr('src', imgSrc); 
    } 
}; 

Answer 1

Вы пробовали следующее?

var tie = parseInt(document.getElementById("tie").value); 

Ваш текущий код:

document.getElementById("tie") 

извлекает элемент DOM, а не значение входного сигнала. поэтому вам нужно использовать .value, а затем вы анализируете его как целое число, так как значение входных данных, скорее всего, представляет собой строковое представление нужного числа, а не целочисленное значение.

Answer 2

После размышления я понял, что все в порядке, если переменные являются строками, и смотрел на код с другой точки зрения. И что вы знаете, это была простая ошибка.

$("#startknapp").click(function(){ 
    var spiller = prompt("Hva heter du?"); 
    $("#userSelect").html(userMenu); 
    $("#result").html("<h4>Velg figur, " + spiller + "</h4>"); 
    $("#status").html('<h4>Liv: <span id="life">' +lives+ '</span> - Seire: <span id="win">' + wins + '</span> - Uavgjort: <span id="tie">' + ties + '</span> - Tap: <span id="lose">' + losses + '</span>'); 
    console.log(typeof "lives"); 
    console.log(typeof "wins"); 
    }); 

function updateScore(result) { 
    tie = document.getElementById("tie"); 
    win = document.getElementById("win"); 
    lose = document.getElementById("lose"); 
    life = document.getElementById("life"); 

Первоначально последняя строка updateScore (результат) была:

lives = document.getElementById("life"); 

В результате были смешаны две переменных (локальная один для функции (жизнь) и глобального (живет). Таким образом, в конце концов это была опечатка, но я все еще заинтригован тем фактом, что переменная может быть строкой и значением, содержащимся внутри целого числа.