这个代码烧水项目有什么问题答案

【问题标题】：What's wrong with this code water boiling project这个代码烧水项目有什么问题
【发布时间】：2013-08-16 19:51:44
【问题描述】：

我这样做是为了上课。重点是展示如何在编程中烧开水......这很奇怪，但你可以看看我的代码，看看发生了什么。它有一个目的，但我没有时间解释。请不要做任何大的改变。我希望它以不应该如何完成或其他方式运行。我不是最擅长 javascript，所以请不要这么评价。

问题

它的第一个输入工作正常，所以不用担心。这是我的表单有问题......应该发生的是我输入其中一个变量，它会显示曾经倒过的内容。但是当我去提交它什么都不起作用......只是重新启动页面！到目前为止我给了......因为我显然不知道出了什么问题：P 可能是一些愚蠢的事情。谢谢！

代码

<html>
  <head>
    <title>
      Boiling Water
    </title>
  </head>
  <body bgcolor='#000000'>
    <center>
      <font color='#ffffff' size='8'><b>D.W.B.A</b>
      <br>
      Digital</font> <font color='#00ffff' size='8'>Water</font><font color='#ffffff'               size='8'> Boiling Association</font>
      <br>
      <font size='3' color='#ffffff'>Programmed in JavaScript</font>
      <br>
      <br>
      <br>
      <p><font color='#ffffff' size='4'>Grab 1 of 56 Cups From the Kitchen Cabinet!</font></p>
      <font color='#ff0000' size='4'><p id="cup"><input type='button' value='Obtain Cup' onclick='cup()' /></p></font>
      <script>
        function cup() {
            var cabinet=56;
            var quantity=55;
            var obtain=cabinet-quantity;
            var cupP=document.getElementById("cup")
            cupP.innerHTML="You have Obtained " + obtain + " Cup";
        }
      </script>
      <script>
        function fill() {
            var x=document.getElementById("calculate").value;
            var optionzero=0;
            var optionone=25;
            var optiontwo=50;
            var optionthree=75;
            var optionfour=100;
            if (optionzero) {
                pour="Please Pour contents into your Cup";
            } else if (optionone) {
                pour="You have filled the Cup 1/4 of the way with water";
            } else if (optiontwo) {
                pour="You have filled the Cup 2/4 or 1/2 of the way with water";
            } else if (optionthree) {
                pour="You have filled the cup 3/4 of the way with water";
            } else if (optionfour) {
                pour="Your cup is filled (4/4 of the way) with water";
            }
            document.getElementById("fillup").innerHTML=pour;
       }
     </script>
     <br>
     <form type='input' >
       <font color='#ffffff' size='4'>Fill the Cup with Water per 25% out of 100% Ex) 25%, 75%, etc. </font>
       <br>
       <br>
       <input type='text' id='calculate'>
       <br>
     </form>
     <input type='submit' value='Calculate' onclick='fill()' />
     <br>
     <font color='#ffffff'><p id='fillup'>
     </p></font>
    </center>
  </body>
</html>

【问题讨论】：

Javascript code disappears after button click的可能重复
请学习如何缩进。如果它没有改善，我希望你的教练给你打分
...请不要使用<font>标签。
请注意 - 您设置了所有 optionzero 变量等。然后您检查它是否为真......它是，因为它已设置。它在一个函数中，所以它总是pour="Please Pour contents into your Cup";
无论你的导师是谁，他们都应该被解雇。真的是标签。它们自 1999 年以来已被弃用。使用样式属性或将样式放在样式表中。

标签： javascript html

【解决方案1】：

只需尝试不提交表单即可。您可以从 fill 函数中 return false; 并将您的内联处理程序更改为 onclick='return fill()' 或简单地将整个输入更改为：

<button type='button' onclick='fill()'>Calculate</button>

当您想将信息发送到您不需要在那里执行的服务器端进程时，提交表单最有用。

【讨论】：

【解决方案2】：

您的表单正在提交到当前页面。您可能应该将您的 fill() 移动到 onsubmit 以获取表单。另外，请确保该函数返回false，否则表单仍将提交。

【讨论】：