Question

我对这个项目有些困难，我不确定出了什么问题。

我正在为学校项目使用HTML和JavaScript创建一台自动售货机，出于某种原因，我设置的用于添加金钱的系统不会存储该值。

每当我点击按钮添加一些更改时，它会显示一瞬间消失。

理论上，如果我按下$1按钮，它会显示1美元，然后消失，但是如果我按下$ 2按钮，它应该说＆＃34; $ 3.00＆＃34;，对？不，它只是覆盖它并说2美元，然后消失。

代码如下：

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

以下是Javascript文件：

function TextValue(button) {
    document.getElementById("current").value = button;
}

var totalMoney = 0.00

function MoneyAdd(total) {
    totalMoney += total;
    document.getElementById("moneyDisplay").innerHTML = "$" + totalMoney.toFixed(2);
}

我希望这不是很难读，也不是那么漂亮。

Answer 1

它覆盖的原因是因为你直接指定了值：

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

例如，如果button等于5，则#current的值将设置为5.如果您单击4，则会将其设置为4.如果要增加此值，请使用+=：

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

请注意，我在这里使用了一元加号（+button）来确保button是一个数字，而不是一个字符串。

至于它消失的原因，请参阅：Why does the value is displayed and then disappear after I click on the button in JavaScript?

Answer 2

问题与包装按钮的形式有关。默认情况下，表单内的按钮类型为"submit"，因此每次单击其中一个按钮时，页面都会刷新。您有两种选择：

1）更改简单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）明确定义每个按钮的类型。类型应为"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>

在我看来，由于那些按钮不必在服务器上进行任何操作，你不需要在那里使用表格，所以我会使用第一个解决方案并使用一个简单的div

Javascript不存储值

2 个答案: