JavaScript onclick return

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.

don't use onsubmit if you aren't planning on receiving and storing the data to a database or transferring it to email. I would just use a regular button outside the form or even a div. — CRABOLO
– CRABOLO, Commented Jan 25, 2014 at 3:48
by the way, function checkGuessedNumber does not return anything, just prints something in a div that indicates whether you guessed the random number or not. — krato
– krato, Commented Jan 25, 2014 at 3:48
thanks for that tip @AlienArrays. so should I just use button onclick="checkGuessedNumbers();" or button onclick="return checkGuessedNumbers();" — krato
– krato, Commented Jan 25, 2014 at 3:50
I would just do <form> no onsubmit there... and then create a input type=button , and then when user clicks on that button do onclick="checkguessdnumber() — CRABOLO
– CRABOLO, Commented Jan 25, 2014 at 3:52
yup I get that, but what's the difference when I use <input type="button" onclick="return checkGuessedNumbers();"> — krato
– krato, Commented Jan 25, 2014 at 3:54

m59 · Accepted Answer · 2014-01-25 04:10:09Z

2

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
}

edited Jan 25, 2014 at 4:10

answered Jan 25, 2014 at 3:55

m59

43.9k14 gold badges122 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

krato Over a year ago

yup I understand that inline js is bad practice but just for a short program I think that would suffice. What do you mean by "disables the submit nature"?

m59 Over a year ago

@krato When clicked, that button wants to submit the form, which will cause a page refresh. If the onclick returns false, it won't.

krato Over a year ago

what would be the difference if I'll just do <button id="my-btn" onclick="foo()">Click Me!</button> rather than doing mybtn.addEventListener('click', foo)

m59 Over a year ago

@krato There's no difference in behavior. The difference is that inline js is an evil mess with unexpected behavior in other situations, it's against the principle of separation of concerns, etc. See my updated answer.

krato Over a year ago

I appreciate the best practices you shared but I am more concerned on the difference when I do onclick="return foo()" vs onclick="foo()". And I'll see to it to do best practices once I'm done with my baby steps.

|

Collectives™ on Stack Overflow

JavaScript onclick return

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related