Javascript不存储值_Javascript_Html_Variables

Javascript不存储值

javascript html variables

Javascript不存储值,javascript,html,variables,Javascript,Html,Variables,我在这个项目上遇到了一些困难，我不知道出了什么问题我正在为一个学校项目创建一个使用HTML和JavaScript的自动售货机，由于某种原因，我为增加资金而设置的系统不会存储价值每当我单击按钮添加一些更改时，它会在一瞬间出现并消失理论上，如果我按下$1按钮，它会显示为1美元，然后消失，但如果我按下$2按钮，它会显示“$3.00”，对吗？不，它只是覆盖它，说2美元，然后消失代码如下： <HTML> <HEAD> <TITLE>Jav

我在这个项目上遇到了一些困难，我不知道出了什么问题

我正在为一个学校项目创建一个使用HTML和JavaScript的自动售货机，由于某种原因，我为增加资金而设置的系统不会存储价值

每当我单击按钮添加一些更改时，它会在一瞬间出现并消失

理论上，如果我按下

$1

按钮，它会显示为1美元，然后消失，但如果我按下$2按钮，它会显示“$3.00”，对吗？不，它只是覆盖它，说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>

我希望这不太难理解，它没有那么漂亮。

它覆盖的原因是因为您直接赋值：

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

例如，如果此处的

按钮等于5
，则#current
的值将设置为5。如果然后单击4
，它将被设置为4。如果希望此值递增，请使用+=
：
document.getElementById("current").value += +button;

请注意，我在这里使用了一元加号（+按钮
），以确保按钮
是数字而不是字符串
至于它消失的原因，请参见：
问题与包装用于添加钱的按钮的表单有关。默认情况下，表单中的按钮类型为“提交”
，因此每次单击其中一个按钮时，页面都会刷新。您有两个选择：
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>

在我看来，因为按钮不必在服务器上执行任何操作，所以不需要在那里使用表单，因此，我将使用第一个解决方案，并使用一个简单的div。
将其放在JSFIDLE中-我们很容易看到它在工作then@user3686583我之所以没有包括你接受的答案中提到的东西，是因为我在底部链接的问题中回答了这个问题。christiansr85的答案并不能解决您的加法问题，如果这是您想要的答案，则此问题应标记为重复。将表单
元素更改为div
元素不会改变任何内容。如果有什么问题的话，form
元素更适合包装表单元素。如果我错了，请纠正我，但我认为如果html的这一部分不需要在服务器上执行任何操作，那么作为表单有意义吗？我认为它应该是一个简单的html容器，它的按钮只在客户端执行一个简单的函数，不是吗？无论如何，更改div标记的form标记，行为是@user3686583所期望的。HTML规范声明“form

元素表示表单相关元素的集合，其中一些可以表示可提交给服务器进行处理的可编辑值。”按钮是表单相关元素，这并不是说必须提交其中的内容。这解决了我的问题，非常感谢！好的，你说得对。因此，也许我们可以添加到您链接到的解决方案中，如果没有为表单中的按钮指定类型，那么默认情况下，它是一个提交按钮，每次单击它时，页面都会刷新，不是吗？

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

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