0

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

2 回答 2

2

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

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

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

于 2013-08-16T19:58:17.017 回答
0

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

于 2013-08-16T19:54:27.217 回答