Javascript onclick function being called on page load

Question

I have a simple Javascript function to be called when a button on the page is clicked. But it is getting called as soon as the page loads. Can anyone please tell me what the problem here is?

The HTML is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">ClicMe!</button>
    <div id="demo"></div>
    <script src="script.js"></script>
  </body>
</html>

While the 'script.js' file is as follows.

var url = "example.txt";

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction(xhttp) {
  document.getElementById("demo").innerHTML = xhttp.responseText;
}

var btn = document.getElementById("btn");
btn.onclick = loadDoc(url, myFunction);

you are calling the function here btn.onclick = loadDoc(url, myFunction); — pilchard
– pilchard, Commented Sep 26, 2020 at 11:35

jhrmdk · Accepted Answer · 2020-09-26 11:41:13Z

2

You must attach an event listener that invoke the function when a user clicks a button:

btn.addEventListener('click', () => {
  loadDoc(url);
});

answered Sep 26, 2020 at 11:41

jhrmdk

6527 silver badges13 bronze badges

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

Comments

ThatComputerGuy · Accepted Answer · 2020-09-26 11:42:53Z

1

The last line of your script is calling the function instead of assigning the handler to it. Since you have arguments that you want to call it with, you need to use something to bundle the arguments and function together for when it is called. If you replace the last line with the following, it should work:

btn.onclick = loadDoc.bind(undefined, url, myFunction) // "this" value is not needed, so it is left undefined

answered Sep 26, 2020 at 11:42

ThatComputerGuy

2191 silver badge6 bronze badges

1 Comment

Hamid Ali Over a year ago

Thanks. Your solution is very compact and it worked. I had earlier just found out the problem but I had solved it by calling loadDoc with parameters from another function and then assigning that function to onclick, but yours is a better solution.

Nengak dakup · Accepted Answer · 2020-09-26 11:42:39Z

0

use an arrow function like this:

btn.onclick = () => loadDoc(url, myFunction);

answered Sep 26, 2020 at 11:42

Nengak dakup

882 silver badges11 bronze badges

1 Comment

Hamid Ali Over a year ago

Thanks for the reply. I had used the same method as yours but not compacted it in an arrow function, rather a separate function. Your is more compact, in a single line.

Mrigank Shekhar Shringi · Accepted Answer · 2020-09-26 11:50:06Z

0

You are explicitly calling loadDoc() function in your JS file. You should try this -

var url = "https://jsonplaceholder.typicode.com/posts";

function loadDoc() {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
  
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn" onclick='loadDoc()'>ClicMe!</button>
    <div id="demo"></div>
    <script src="script.js"></script>
  </body>
</html>

edited Sep 26, 2020 at 11:50

answered Sep 26, 2020 at 11:37

Mrigank Shekhar Shringi

957 bronze badges

Comments

Levent gülmezoğlu · Accepted Answer · 2023-07-10 11:57:46Z

0

var url = "https://jsonplaceholder.typicode.com/posts";

function loadDoc() {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
  
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn" onclick='loadDoc()'>ClicMe!</button>
    <div id="demo"></div>
    <script src="script.js"></script>
  </body>
</html>

answered Jul 10, 2023 at 11:57

Levent gülmezoğlu

12 bronze badges

Comments

Christopher Martinez · Accepted Answer · 2025-03-14 14:31:21Z

0

btn.onclick = loadDoc(url, myFunction);

This is assigning the return value of loadDoc to btn.onclick not the reference of it. In order to get the return value of a function you have to run the function. So what you want to do is assign the function reference, but you have params you are trying to pass.

btn.addEventListener("click", () => loadDoc(url, myFunction));

Using addEventListeren is best practice. This assigns the reference of an anonymous function that calls loadDoc with the params you want to pass.

answered Mar 14 at 14:31

Christopher Martinez

1

Collectives™ on Stack Overflow

Javascript onclick function being called on page load

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related