Question

I am new to JavaScript and I'm still figuring things out.

I already searched the web for this but I'm not quite sure what keywords should I use. I am creating some program with a random number using html and JS.

So in my javascript (inside the tag) I have something like:

var x;
function initRandom() {  // I run this function at loading time (i.e: <body onload="initRandom();">)
  x = Math.random();
}

function checkGuessedNumber() {  // this just checks if the number guessed by the user is == to x and displays "correct" in a div if it is correct otherwise "incorrect"
}

So the main problems I am encountering is that

  • The html elements gets reset after submit. For example, the text fields becomes blank, the things I displayed in a div becomes blank. It just shows for a short period of time then gets reset
  • After that, the generated number becomes a different number I think the html page loads once more every time I click submit. And I don't like that to happen.

What I am having confusions on is the return statement on the onClick() attribute and how is it different on without return. See examples below:

CODE1:

<form onsubmit="return checkGuessedNumber();">
 <input type="text">                // input for the number
 <input type="submit">              // click if already sure of input number above
</form>

CODE2:

<form onsubmit="checkGuessedNumber();">  // notice no return here
 <input type="text">                
 <input type="submit">              
</form>

And finally if I'll just gonna put the checkGuessedNumber on <input type="submit" onclick="checkGuessedNumber();"> OR having a return before that.

Was it helpful?

Solution

Here's a live demo (click) of everything in this post.

First, don't use inline js (js functions in your html, like onclick). Read some of these results: Why is inline js bad?

Just for completeness, I'll explain how it works anyway:

This disables the submit nature of the button.

<input type="submit" onclick="return false;">

Now, if you want to use a function, you still need to produce the above result, so:

<input type="submit" onclick="return foo()">

and foo will have to return false, so that return foo() is the same as return false:

function foo() {
  //do what you need to do;
  return false;
}

I'll update this in a moment explaining the best practice, NOT using inline js.

The best element for a "button" is <button>, so I recommend that.

<button id="my-btn">Click Me!</button>

I gave it an id so that we can easily identify it in javascript. There are plenty of other ways to get element references, but that's another topic. Now, in javascript:

//get the element reference
var myBtn = document.getElementById('my-btn');

//this will make the button call function "foo" when it is clicked.
myBtn.addEventListener('click', foo);

function foo(event) {
  //do whatever you want
}

If you assign an event listener to an element that has a default behavior, you can prevent the default behavior like this:

//the "event" object is automatically passed to the event handler
function foo(event) {
  event.preventDefault();
  //do what you want here
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top