Javascript Recipe Calculator, Hangs on isNan() Function?

Question

I'm making a recipe calculator for my coursework. I have reached the stage where it will correctly validate everything and make a new row in a table. Sadly in the if statement within the recipe function, it always goes true for isNaN? No matter what I put? Can anyone help me with this?

<!DOCTYPE html>
<html>
<head>

<title>Website Title</title>

<script type="text/javascript">
// Declare all variables
var ingredient = document.getElementById("ingredient").value;
var amount = document.getElementById("number").value;
var unit = document.getElementById("unit").value;
var ingredientcount = 0


// The save function
function save(){
var verified = true;
while(verified){
var name = prompt("What's the name of the recipe?")
var serves = prompt("How many people does it serve?")
    if(serves === "" || name === "" || isNaN(serves)=== true)
    {
        alert("You have to enter a name, followed by the number of people it serves. Try again.")
        verified = false;
    }
    else{
        alert("sucess!");
       // array(ingredient,amount,unit,name,serves)
        return;
    }
}

}
// The function to valiate the data and manage everything
function recipe(){
if(ingredient === ""|| amount === "" || unit === "Select Unit"){
  alert("You must fill in all fields.")
}
else if(isNaN(amount)){
    alert("You have to enter a number in the amount field")
}

else{
    alert("hey!")
    alert(recipe[1][2] + recipe[1][1])
    var totalamount = amount + " "+ unit
    insRow(ingredient, totalamount) // post(0,*123456*,"Fish")
    ingredientcount ++;
    alert(ingredientcount);
    }   
}

</script>

</head>

<body>

<h1>Recipe Name</h1>
<h2>Serves many people </h2>
<table border="1" id="table" >

<tr>
<td>
<input type="text" id="ingredient" placeholder="Enter an Ingredient">
</td>
<td>
<input type="text" id="number" placeholder="Enter an amount">
<select id="unit">
        <option>Select Unit</option>
        <option>Grams</option>
        <option>Mililitres</option>
        <option>Number</option>
</select>
</td>
<td>
<button type="button" onclick="recipe()">Add</button>

<button type="button" onclick="save()">Save</button>

</td>
</tr>


<th>Ingredient</th>
<th>Amount</th>
<th> </th>
</table>
</body>
</html>

You've got a `recipe` variable and a `recipe` function which conflict with each other. — Joe Enos, Sep 13 '13 at 21:22
Which `isNaN` are you having problems with? The one in `save()` or the one in `recipe()`? You should probably strip out the parts of this code that you don't need, so it's easier to see exactly which part you're having problems with. — Joe Enos, Sep 13 '13 at 21:23
The one within the Recipe function, It just does the alert whatever i input — user2179936, Sep 13 '13 at 21:27
In the `recipe` function, you're using the variables that were assigned before the page even loads. It actually shouldn't even make it to the `isNaN` line and should instead fail on the `"You must fill in all fields."` message. This would be the problem fred02138 describes in his answer below. — Joe Enos, Sep 13 '13 at 21:36
So if i wanted to use the input values elsewhere, would i have to create new variables, or can I have global variables? — user2179936, Sep 13 '13 at 21:38
You should use local variables whenever you need to retrieve the values - that way you're always working with the current value. If you read the value once globally, it will be stale the next time you try to use it. — Joe Enos, Sep 13 '13 at 21:40
Ahh okay, Thank you so much :) Last question.. What does "Object is not a function" mean in the console when when recipe() is called? O.o — user2179936, Sep 13 '13 at 21:42
My guess is that it's due to the `recipe` variable that you have conflicting with your `recipe` function. You'll need to rename one or both of those. — Joe Enos, Sep 13 '13 at 21:43
Ahh Thanks, It works now, I feel stupid for making such easy mistakes. Thank you for your help, I'm gonna get an A* :D — user2179936, Sep 13 '13 at 21:45

score 2 · Accepted Answer · answered Sep 13 '13 at 21:22

2

The problem is that you are setting the values of ingredient, amount, and unit when the page loads, not when the Add button is pushed. You need to move those assignments to the recipe() function.

answered Sep 13 '13 at 21:22

fred02138

3,323
1
14
17

Javascript Recipe Calculator, Hangs on isNan() Function?

1 Answers1