Outputting Variable?

Ok so I want the variable total to putput, I have the variable declared in script globally.




var ToppingTotal= 0;

function AddBacon()
{


document.getElementById("BaconAdd").disabled=true;
document.getElementById("BaconRemove").disabled=false;
document.getElementById("BaconTick").style.visibility="visible";
document.getElementById('bacon').src='bacon' + '.png';



ToppingTotal = (ToppingTotal + 1);
document.getElementById("ToppingCost").value = ToppingTotal;



}




And down in the html:


<input type="text" id="ToppingCost">

How are you calling the function AddBacon()?

As it stands the textbox does not exist when the function runs.
It is fine if you have
<input type = "button" onclick = "AddBacon()">

That is one reason why it is best to place scripts right ahead of the </body> tag.


"Knowledge is of no value unless you put it into practice.” - Anton Chekhov (Russian playwright and master of the modern short story, 1860-1904)

Im calling it from a button

<input id="BaconAdd" onclick="AddBacon()" type="button" value="Add" />

So how would you suggest I fix it? Its for an assignment so the stress id building:o
The text box shows but no value is in it, Im trying to get the total to update in there

Well, this works fine for me. Are there errors in the lines I have omitted? Use alerts to inspect the values. And as Logic Ali would say, use your error console.

<script type = "text/javascript">

var ToppingTotal= 0;

function AddBacon(){
ToppingTotal +=1;
document.getElementById("ToppingCost").value = ToppingTotal;
}

</script>

<input type="text" id="ToppingCost">
<input type="button" onclick="AddBacon()" value="Add Bacon" />

</body>

Thanks man, lifesaver the += solved it, the slower way might have some syntax wrong!

Cheers for that! :)