I'm having some difficulty with this project and I'm not sure what is going wrong.
I am creating a Vending machine using HTML and JavaScript for a school project, and for some reason, the system I set up for adding money won't store the value.
Whenever I click the button to add some change, it shows up for a split second and disappears.
In theory, If I were to press the $1
button, it shows up with 1 dollar, then disappears, but if I press the $2 button, it should say "$3.00", right? Nope, it just overrides it and says 2 dollars, then disappears.
Code is as follows:
<HTML>
<HEAD>
<TITLE>JavaScript Vending Machine</TITLE>
<script src="vendingmachine.js"></script>
</HEAD>
<BODY>
<h1>Vending Machine</h1>
<p>Items are as follows:<ul>
<li>1. Smith's Chips: Original <b>$2.50</b>
<li>2. Red Rock Deli: Sweet Chilli & Sour Cream <b>$3.00</b>
<li>3. Twisties: Original <b>$2.30</b>
<li>4. Doritos <b>$2.50</b>
<li>5. M&Ms: Plain <b>$3.20</b>
<li>6. Kit Kat <b>$1.50</b>
<li>7. Snickers <b>$2.35</b>
<li>8. Coca Cola <b>$3.00</b>
<li>9. Pepsi Max <b>$2.80</b>
</br>
<br>
<form>
<b>Insert money here</b>
</br>
<!-- buttons for adding money begin here -->
<button name="5c" onclick="MoneyAdd(0.05)">5c</button>
<button name="10c" onclick="MoneyAdd(0.10)">10c</button>
<button name="20c" onclick="MoneyAdd(0.20)">20c</button>
<button name="50c" onclick="MoneyAdd(0.50)">50c</button>
<button name="$1" onclick="MoneyAdd(1.00)">$1</button>
<button name="$2" onclick="MoneyAdd(2.00)">$2</button>
</form>
<b>Your current money:</b><div id="moneyDisplay"></div>
<!-- buttons for adding money end here -->
<button name="1" onclick=TextValue(1)>1</button>
<button name="2" onclick=TextValue(2)>2</button>
<button name="3" onclick=TextValue(3)>3</button>
</br>
<button name="4" onclick=TextValue(4)>4</button>
<button name="5" onclick=TextValue(5)>5</button>
<button name="6" onclick=TextValue(6)>6</button>
</br>
<button name="7" onclick=TextValue(7)>7</button>
<button name="8" onclick=TextValue(8)>8</button>
<button name="9" onclick=TextValue(9)>9</button>
<form>
<input type="text" size="1" id="current"/>
</form>
<form>
<input type="button" onclick="Buy();" value="Buy">
</form>
</BODY>
</HTML>
Below is the Javascript file:
function TextValue(button) {
document.getElementById("current").value = button;
}
var totalMoney = 0.00
function MoneyAdd(total) {
totalMoney += total;
document.getElementById("moneyDisplay").innerHTML = "$" + totalMoney.toFixed(2);
}
I hope this isn't too difficult to read, it's not that pretty.