What's wrong with this code water boiling project

Question

I'm doing this for a class. The point is to show how to boil water in programming... idk it's weird but you can look at my code and see what's up. It has a purpose but I don't have time to explain. please don't make any big changes. I want it to run the way it is not how it should be done or whatever. I'm not the best with javascript so please don't judge as much.

issue

it the first input works fine so no worries about that. It's my form that has issues.... what's supposed to happen is I type one of the variables in and it'll display what ever pour says. But when I go to submit it doesn't work whatsoever... just restarts the page! I give so far.... because I obviously don't know what's wrong :P something stupid probably. Thanks!

code

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

possible duplicate of [Javascript code disappears after button click](http://stackoverflow.com/questions/18119773/javascript-code-disappears-after-button-click) — JJJ, Aug 16 '13 at 19:53
Please learn how to indent. I hope your instructor marks you down for it if it doesn't improve — Bojangles, Aug 16 '13 at 19:54
Just a note - you set all the `optionzero` vars etc. Then you check wether it's true... And it is, since it is set. It's in a function, so It'll always be `pour="Please Pour contents into your Cup";` — jdepypere, Aug 16 '13 at 19:56
Whoever your instructor is they should be sacked. Really tags. They've been deprecated since 1999. Use style attributes or place the style in a stylesheet. — , Aug 16 '13 at 19:58

score 2 · Answer 1 · answered Aug 16 '13 at 19:58

Simply try not submitting the form. You can either return false; from the fill function and change your inline handler to onclick='return fill()' or simply change the whole input for:

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

Submitting the form is mostly useful when you want to send information to a server-side process which you don't need to do there.

score 0 · Answer 2 · answered Aug 16 '13 at 19:54

0

Your form is submitting to the current page. You should probably move your fill() to onsubmit for the form. Also, make sure that function returns false, or the form will still submit.

answered Aug 16 '13 at 19:54

Brad

159,648
54
349
530

What's wrong with this code water boiling project

issue

code

2 Answers2