这个代码水煮项目有什么问题

时间:2013-08-16 19:51:44

标签: javascript html

我正在上课。关键是要展示如何在编程中煮水... idk它很奇怪,但你可以查看我的代码,看看是什么。它有目的但我没有时间解释。请不要做任何重大改变。我希望它能够以不应该如何完成的方式运行。我不是最好的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>

2 个答案:

答案 0 :(得分:2)

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

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

当您想要将信息发送到服务器端进程时,提交表单非常有用。

答案 1 :(得分:0)

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