CODEWITHSUNDEEP
javascriptnan
user5066670
user5066670

Reputation:

NaN appears when trying to calculate price

I am new to programming, and am trying to create a simple mathematical script that determines the price of the game the user selects and multiplies that by the number of days they wish to reserve the game.

It works, but the final price always comes out as 'NaN' (which I believe stands for 'Not a Number').

Any help will be greatly appreciated.

<html>

<body>

  <p><strong>Game ID</strong><br>   
  <input type="number" name="gameID" id="gameID" placeholder="1-8">

<p><strong>Days you wish to reserve the game for</strong><br>
  <input type="number" name="daysReserved" id="daysReserved" placeholder="1-5">

<br>

<button type="button" onclick="idToPrice();finalPriceCalculation();">Reserve!</button>

<p id="totalPriceOutput"></p>

<script>
function idToPrice() {

var id = document.getElementById("gameID").value;

if (id == 1) {
var gamePrice = 0.99;
} else if (id == 2) {
var gamePrice = 0.99;
} else if (id == 3) {
var gamePrice = 1.99;
} else if (id == 4) {
var gamePrice = 1.99;
} else if (id == 5) {
var gamePrice = 3.99;
} else if (id == 6) {
var gamePrice = 3.99;
} else if (id == 7) {
var gamePrice = 0.99;
} else if (id == 8) {
var gamePrice = 0.99;
} else {
document.getElementById("totalPriceOutput").innerHTML = "Error. Your final price could not be calculated because you selected an invalid game ID.";
}
}

function finalPriceCalculation() {
var daysInputted;
var gamePrice;
var finalPrice = daysInputted * gamePrice;

document.getElementById("totalPriceOutput").innerHTML = "Your final price is &pound;" + finalPrice + ".";
    }
</script>

</body>

</html>

Upvotes: 0

Views: 500

Answers (4)

BhavO
BhavO

Reputation: 2399

daysInputted is not being assigned a number so it's undefined, so you are multiplying with undefined, hence NaN

Upvotes: 1

Shri
Shri

Reputation: 834

NOTE: There were 3 problems in your code. I have corrected them all, plus modified conditionals using switch case statements for better readability.

1. In your this code, your var daysInputted and var gamePrice are both local.

var daysInputted;
var gamePrice;
var finalPrice = daysInputted * gamePrice;

You might be thinking when you are calling idToPrice() method first so gamePrice must be defined. But it is not so.

Because when you say var gamePrice inside a method, gamePrice becomes a local variable for that method and it is not accessible in any other method.

Hence you either need to define both the variables inside the same method or make them global in the idToPrice() method.

2. You also need to define daysInputted as

var daysInputted = document.getElementById("daysReserved").value;

3. you also need to parse document.getElementById("gameID").value to Integer

Your final code fully working code will be

<body>

  <p><strong>Game ID</strong><br>   
  <input type="number" name="gameID" id="gameID" placeholder="1-8">

<p><strong>Days you wish to reserve the game for</strong><br>
  <input type="number" name="daysReserved" id="daysReserved" placeholder="1-5">

<br>

<button type="button" onclick="idToPrice();finalPriceCalculation();">Reserve!</button>

<p id="totalPriceOutput"></p>

<script>
function idToPrice() {

    var id = parseInt(document.getElementById("gameID").value);

    switch(id) {
        case 1:
            gamePrice = 0.99;
            break;
        case 2:
            gamePrice = 0.99;
            break;
        case 3:
            gamePrice = 1.99;
            break;
        case 4:
            gamePrice = 1.99;
            break;
        case 5:
            gamePrice = 3.99;
            break;
        case 6:
            gamePrice = 3.99;
            break;
        case 7:
            gamePrice = 0.99;
            break;
        case 8:
            gamePrice = 0.99;
            break;
        default:
            document.getElementById("totalPriceOutput").innerHTML = "Error. Your final price could not be calculated because you selected an invalid game ID.";
            break;
    }
}

function finalPriceCalculation() {
    var daysInputted = document.getElementById("daysReserved").value;
    var finalPrice = daysInputted * gamePrice;

    document.getElementById("totalPriceOutput").innerHTML = "Your final price is &pound;" + finalPrice + ".";
}
</script>

</body>

Upvotes: 1

Mindastic
Mindastic

Reputation: 4131

Your JS code could be: 

function idToPrice() {
 var id = document.getElementById("gameID").value,
     gamePrice, daysInputted, finalPrice; //It is a good practice to define variables at the top of the function, check "variable hoisting".
 if (id === 1) { // It is a good practice to use "===" for checking value and type
   gamePrice = 0.99;
 } else if (id === 2) {
   gamePrice = 0.99;
 } else if (id === 3) {
   gamePrice = 1.99;
 } else if (id === 4) {
   gamePrice = 1.99;
 } else if (id === 5) {
   gamePrice = 3.99;
 } else if (id === 6) {
   gamePrice = 3.99;
 } else if (id === 7) {
   gamePrice = 0.99;
 } else if (id === 8) {
   gamePrice = 0.99;
 }
 if (gamePrice) {
   daysInputted = document.getElementById("daysReserved").value || 0;
   finalPrice = daysInputted * gamePrice;
 }

 if (finalPrice) {
   document.getElementById("totalPriceOutput").innerHTML = "Your final price is &pound;" + finalPrice + ".";
 } else {
   document.getElementById("totalPriceOutput").innerHTML = "Error. Your final price could not be calculated because you selected an invalid game ID.";
 }
}

And, your HTML code:

<button type="button" onclick="idToPrice()">Reserve!</button>

Upvotes: 0

Unni Babu
Unni Babu

Reputation: 1814

Found problem
The variables are not getting value,
Didnt use parseInt() to get integer values
Complete code modified, tested and works 100% 


    <html>

    <body>

    <p><strong>Game ID</strong><br>
        <input type="number" name="gameID" id="gameID" placeholder="1-8">

    <p><strong>Days you wish to reserve the game for</strong><br>
        <input type="number" name="daysReserved" id="daysReserved" placeholder="1-5">

        <br>

        <button type="button" onclick="idToPrice();">Reserve!</button>

    <p id="totalPriceOutput"></p>

    <script>
        function idToPrice() {

            var id = parseInt(document.getElementById("gameID").value);
            var days = parseInt(document.getElementById("daysReserved").value);
            if(!isNaN(id))
            {
                if (id == 1) {
                    var gamePrice = 0.99;
                } else if (id == 2) {
                    var gamePrice = 0.99;
                } else if (id == 3) {
                    var gamePrice = 1.99;
                } else if (id == 4) {
                    var gamePrice = 1.99;
                } else if (id == 5) {
                    var gamePrice = 3.99;
                } else if (id == 6) {
                    var gamePrice = 3.99;
                } else if (id == 7) {
                    var gamePrice = 0.99;
                } else if (id == 8) {
                    var gamePrice = 0.99;
                }
                finalPriceCalculation(id,days);
            }
            else {
                document.getElementById("totalPriceOutput").innerHTML = "Error. Your final price could not be calculated because you selected an invalid game ID.";
            }
        }

        function finalPriceCalculation(gamePrice,daysInputted) {
            var daysInputted;
            var finalPrice = parseInt(daysInputted) * parseInt(gamePrice);

            document.getElementById("totalPriceOutput").innerHTML = "Your final price is £" + finalPrice + ".";
        }

        </script>

Upvotes: 0

Related Questions