John Rønnevik February 2016

Arithmetic with variables not working

For some reason, the arithmetic in the function updateScore(result) doesn't work properly (the function is called later on in the code). wins, ties and losses are printed as they should, but lives is printed as NaN. I know what NaN means. I've also identified that the variables, for some reason or other, are created as strings. What appears strange to me, is that it's working for four out of five variables. There's no consistency. I've tried some number conversions using Number(lives), but that doesn't work either. Any suggestions to how I can ensure that the variables are created as numbers, and aritmethic operations will work?

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 = live        

Answers


Vistari February 2016

Have you tried the following?

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

Your current code:

document.getElementById("tie")

retrieves the DOM element rather than the value of the input. so you need to use .value and then you parse it as an integer as the inputs value is likely a string representation of the number you want rather than an integer value.


John Rønnevik February 2016

After pondering, I figured it's okay if the variables are strings, and looked at the code from a different perspective. And what do you know, it was a simple bug.

$("#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");

Originally the last line of updateScore(result) was:

    lives = document.getElementById("life");

As a result two variables were mixed (the local one for the function (life) and the global one (lives). So in the end it was a typo. However, I'm still intrigued by the fact that a variable can be a string, and the value contained within an integer.

Post Status

Asked in February 2016
Viewed 3,956 times
Voted 13
Answered 2 times

Search




Leave an answer