how to stop Math.random to NOT iterate with each .click()

Question

I am learning jQuery/js and working on the 'hot or cold' exercise that appears to be a popular starting point.

However when submitting the user's input, .click() appears to cause Math.random to generate a new number, thus creating a new number each time the user submits a guess. The desired outcome is that the generated number remains the same.

From what I can tell, my code LOOKS correct. Could someone explain my error?

HTML

<title>Untitled Document</title>
</head>

<body>

<button>
      play?
   </button>

<div class="show">
    </div>

   <form>
    <input type="text" name="inputform" id="textbox" 
    autocomplete="off" value="">
    <input type="submit" id="txtbutton" class="txtbutton" value="Submit">
   </form>

  <div class="showMore">
  </div>

</body>
</html>

JS

$(document).ready(function(){

    var randomNum = Math.floor((Math.random()*100)+1);

    $('div').text(randomNum);

    var ui = $('#textbox');

    $('.txtbutton').click(function(){
        var clearGuess = function() {
            $("#userGuess").val("").focus();
        };
        var x = ui.val();
    });
});

There is code that you are not showing... show all relevant code, please. — d'alar'cop, Mar 01 '14 at 23:55
@Blazemonger I can only assume that it is reloading on submit. but I do not know how to stop this if it is the issues. I have tried 'event.preventDefault();' but this does not seem to have the desired outcome. — , Mar 02 '14 at 00:08
your submitting your form, but not using ajax.form to capture this, in order to submit via ajax http://stackoverflow.com/questions/9789082/jquery-ajax-form-submit — davethecoder, Mar 02 '14 at 00:12
@davethecoder he doesn't actually need a form in the first place for what he's doing. — Benjamin Gruenbaum, Mar 02 '14 at 00:13
@davethecoder since we have yet to reach ajax in the course (it is a future topic), I would assume that this can be accomplished without the use of ajax. is that possible? — , Mar 02 '14 at 00:15
@BenjaminGruenbaum :-) yeah i know, but it is there, so I am assuming that this is early test of what will eventually be a submitting of data — davethecoder, Mar 02 '14 at 00:16
@72Monkeys remove your form tags then, you have a form, this form is posted, the page is refreshed, your code is then generating a new random. remove the form, add a normal button, capture the click event — davethecoder, Mar 02 '14 at 00:17
@72Monkeys $('.txtbutton').click(function(){ does not pick up the click event on your button, because the event is not a click, the event is a form submit — davethecoder, Mar 02 '14 at 00:18

score 4 · Accepted Answer · answered Mar 02 '14 at 00:13

4

Whenever you click that button - the form submits which causes a page reload.

In order to prevent submitting all forms you can:

$("form").submit(function(){
     return false;
});

Which should fix your problem.

Good luck, and enjoy coding JavaScript.

answered Mar 02 '14 at 00:13

Benjamin Gruenbaum

270,886
87
504
504

how to stop Math.random to NOT iterate with each .click()

1 Answers1