1

I'm working on a FizzBuzz solution. I had it working fine when I called the function onload and set the input variable with a prompt (see comments in my code), but when I added a form, called the function onclick, and tried to set the variable using getElementById, my function would not print to the div. In the original version, the output is visible after the function completes. In the updated version, the output flashes briefly and then disappears. It is as if I am immediately refreshing the screen. Any suggestions? Thanks

 <script>
    function fizzbuzz(){
    //  var num = prompt("Enter a number: ");
      var num = document.getElementById("number").value;
      var div3 = document.getElementById("div3");
      for(var i=0; i<num; i++){
        if (i%3===0 && i%5===0){
          div3.innerHTML = div3.innerHTML+"Fizz Buzz<br>";
        }else if (i%3===0){
          div3.innerHTML = div3.innerHTML+"Fizz<br>";
        }else if (i%5===0){
          div3.innerHTML = div3.innerHTML+"Buzz<br>";
        }else{
          div3.innerHTML = div3.innerHTML+(i+1)+"<br>";
        }
      }
    }
  </script>
</head>

<body>
    <!--body onload = "fizzbuzz()"-->
  <div id = "div1">
    <h1>Fizz Buzz</h1>
    <form>
      <p>Enter a number:</p><p><input type="text" name="number" id="number"/><input type="submit" value="Submit" onclick = "fizzbuzz()"/></p>
    </form>
    <div id="div3"></div>
  </div>

</body>
Improve this question
1
  • By the way, please ignore the fact that my function is not returning the correct fizz buzz values (very embarrassing). I was trying to address an issue with strings and ints and posted an interim solution. But this is not relevant to the question I had. Commented Oct 25, 2013 at 15:09

2 Answers 2

Reset to default
2

Your button is of type submit - which is causing the page to post back / refresh, hence why you see it flash. Either prevent the default action with e.preventDefault or change your input to type of button, or use return false;

Prevent Default:

<!--Pass in event to the func-->
<input type="submit" value="Submit" onclick = "fizzbuzz(event)"/>

//Use it
function fizzbuzz(e) {
    e.preventDefault();
    ...
}

Or use type button

<input type="button" value="Submit" onclick = "fizzbuzz()"/>

Or return false

function fizzbuzz(e) {
    ...
    ...
    return false;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Or just return false.
@tymeJV, et al - Thanks. Okay, it works and I understand the problem has to do with my button choice. I also found this in another question "the submit button can be used to submit the form while a normal button can be used to execute some javascript code." Is refresh inherent in the submit button - I mean is it basically the "submit and refresh button"?
Pretty much, submit looks for values to submit to the server (and is typically located inside a form), when submitting to a server without AJAX, a refresh or postback will occur.
I guess once you've submitted the data in the form, you don't really need it in the form anymore. Time to clear the form for the next submission? But when I change to type button and click it, the information in the text field is also cleared. hmmm
Hmm, shouldn't be. Type button won't cause a post back. See: jsfiddle.net/69b4x/1
0

Your <input type="submit"> is submitting your form – and reloading the page – after your click handler runs.

You need to return false from the handler to prevent that.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.