Javascript not storing values

Question

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.

put it in JsFiddle - easy for us to see it working then – Matthew Lock May 29 '14 at 07:49 — Matthew Lock, May 29 '14 at 07:49

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

The reason it overrides is because you're directly assigning the value:

document.getElementById("current").value = button;

If button here is equal to 5, for instance, the value of #current would be set to 5. If you then clicked 4 it would be set to 4. If you want this to increment, instead use +=:

document.getElementById("current").value += +button;

Note that I've used the unary plus here (+button) to ensure button is a number and not a string.

As for why it disappears, see: Why does the value is displayed and then disappear after I click on the button in JavaScript?

edited May 23 '17 at 11:50

Community

1
1

answered May 29 '14 at 07:44

James Donnelly

126,410
34
208
218

@user3686583 the reason I didn't include the stuff the answer you've accepted has put is because this is answered in the question I've linked to at the bottom. christiansr85's answer does not fix your addition problem, and if that's the answer you're going for then this question should be flagged as a duplicate. – James Donnelly May 29 '14 at 08:19

score 0 · Accepted Answer · answered May 29 '14 at 08:13

The problem is related to the form which wraps the buttons for adding money. By default, the buttons inside the form are of type "submit", so every time you click one of them, the page is refreshed. You have two options:

1) Change the form tag for a simple div:

<div>
   <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>
</div>

2) Define explicitely the type of every button. The type should be "button":

<form>
   <b>Insert money here</b>
   </br>
   <!-- buttons for adding money begin here -->
   <button type="button" name="5c" onclick="MoneyAdd(0.05)">5c</button>
   <button type="button" name="10c" onclick="MoneyAdd(0.10)">10c</button>
   <button type="button" name="20c" onclick="MoneyAdd(0.20)">20c</button>
   <button type="button" name="50c" onclick="MoneyAdd(0.50)">50c</button>
   <button type="button" name="$1" onclick="MoneyAdd(1.00)">$1</button>
   <button type="button" name="$2" onclick="MoneyAdd(2.00)">$2</button>
</form>

In my opinion, because of that buttons don't have to do any operation in the server, you don't need to use a form there, so I would use the first solution and use a simple div.

Changing the `form` element into a `div` element will not change anything. If anything the `form` element is more appropriate as it is used to wrap form elements. — James Donnelly, May 29 '14 at 08:21
Please, correct me if I'm wrong, but I think that if that section of html doesn't need to do any action in the server, has it sense to be a form? I think it should be a simple html container whose buttons only execute a simple function in the client, isn't it? Anyway, changing the form tag for a div tag, the behavior is the expected by @user3686583. — christiansr85, May 29 '14 at 08:29
The HTML specification states "The `form` element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing." Buttons are *form-associated elements* and this doesn't say that the content within *must* be submitted. — James Donnelly, May 29 '14 at 08:32
OK, you are right [(form associated elements)](http://www.w3.org/TR/html5/forms.html#form-associated-element). So maybe we could add to the solution you have linked to that if no type is specified for a button inside a form, by default it is a submit button, which does that every time you click it, the page is refreshed [(html buttons)](http://www.w3.org/TR/html5/forms.html#the-button-element), isn't it? — christiansr85, May 29 '14 at 08:42

Javascript not storing values

2 Answers2