0

私はクラスのためにこれをやっています。ポイントは、プログラミングで水を沸騰させる方法を示すことです...奇妙ですが、私のコードを見て、何が起きているかを確認できます。目的はありますが、説明する時間がありません。大きな変更はしないでください。私は、それがどのように行われるべきかなどではない方法で実行したいと考えています。私はjavascriptが得意ではないので、あまり判断しないでください。

問題

最初の入力は正常に機能するので、心配する必要はありません。問題があるのは私のフォームです....何が起こるはずなのか、変数の1つを入力すると、これまでに入力した内容が表示されます。しかし、送信しようとすると、まったく機能しません...ページを再起動するだけです! 私はこれまでのところ....何が悪いのか明らかにわからないので、 :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 に答える