Why does the onclick execute without clicking on it in javascript?

Question

problem: the page executes the javascript onclick propertise before get clicked. here is my code

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1 id="demo">Hello World!</h1>
<script>
var x = document.getElementById("demo");
x.onclick = alert("clicked");
</script>
</body>
</html>

solution: when I change the line x.onclick = alert("clicked"); to x.onclick = function() {alert("clicked")}; It works. I want to understand the reason behind this behavior of onclick.

messerbill · Accepted Answer · 2020-02-06 15:51:57Z

2

The reason for that behaviour is, that you simply make a function call and when the JavaScript interpreter comes to that line it will be directly executed. You need to implement a reference to a function or a function definition itself to avoid this (as you did in your solution).

x.onclick = myMethod() // NOT working due to directly execution
x.onclick = () => myMethod() // working
x.onclick = myMethod // working
x.onclick = function() { myMethod() } // working

answered Feb 6, 2020 at 15:51

messerbill

5,6391 gold badge31 silver badges39 bronze badges

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

Comments

Kashif · Accepted Answer · 2020-02-06 16:03:16Z

0

I f you write the code this way also works same

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<script>
var x; 
x.onclick = alert("clicked");
</script>
</body>
</html>

SO your code not understand where you try to send this alert so automatically display so that's not a good way If you try to display alert when clicked on text then do this method

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
    <h1 id="demo" >Hello world!</h1>
<script>

document.getElementById('demo').onclick = function(){
    alert("clicked");
}
</script>
</body>
</html>

answered Feb 6, 2020 at 16:03

Kashif

1,52420 silver badges23 bronze badges

Collectives™ on Stack Overflow

Why does the onclick execute without clicking on it in javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related