CODEWITHSUNDEEP
javascripthtmlwindowsbutton
Outflows
Outflows

Reputation: 173

Button not executing function when clicked

I have a button and I want it to execute a function when I click it but for some reason it isn't working at all. I think there might be a problem with how I am linking the button to my js file. Here's my HTML: 

<!DOCTYPE html>
<html lang = "en-us"></html>
   <head>
      <script src = "spotifybot.js" charset = "utf-8"></script>
      <title>Spotify Login</title>
   </head>
   <body>
      <button id = "login" style = "width: 100px;height: 100px">Login To Spotify</button>
   </body>
</html>

And here's my js file: 

const loginButton = document.getElementById("login").addEventListener('click', loginToSpotify());
const request = require("request");

function loginToSpotify()
{
   console.log("Here");
}

Both the files are in the same folder btw in case you thought that might be the problem.

EDIT: After checking the browser console (I thought I'd be able to check my visual studio console but obviously not), I found the error to be with the "require" keyword

Upvotes: 1

Views: 801

Answers (4)

Saadi Toumi Fouad
Saadi Toumi Fouad

Reputation: 2829

Change this line:

const loginButton = document.getElementById("login").addEventListener('click', loginToSpotify());

to:

const loginButton = document.getElementById("login").addEventListener('click', loginToSpotify);

since you need to give it a reference to a callback function and not the returned value of calling it which is undefined by default.

And I see you're using require, is it an Electron JS app, happy coding :)

Upvotes: 1

DCR
DCR

Reputation: 15665

require is not defined and you don't want to execute your function when you set up the listener.

const loginButton = document.getElementById("login").addEventListener('click', loginToSpotify);
//const request = require("request");

function loginToSpotify()
{
   console.log("Here");
}
   <head>
      <script src = "spotifybot.js" charset = "utf-8"></script>
      <title>Spotify Login</title>
   </head>
   <body>
      <button id = "login" style = "width: 100px;height: 100px">Login To Spotify</button>
   </body>

Upvotes: 1

over-engineer
over-engineer

Reputation: 1053

The second parameter of .addEventListener() should be a function.

You're invoking the loginToSpotify() function, which returns undefined. So, you're passing undefined instead of the actual function.

You have to change this:

.addEventListener('click', loginToSpotify());

to that:

.addEventListener('click', loginToSpotify);

Btw, .addEventListener() doesn't return anything (i.e. returns undefined), so your loginButton now has a value of undefined.

You can either do this:

document.getElementById('login').addEventListener('click', loginToSpotify);

Or, if you want to store the button as well:

const loginButton = document.getElementById('login');
loginButton.addEventListener('click', loginToSpotify);

Upvotes: 1

ariel
ariel

Reputation: 16150

This is incorrect:

addEventListener('click', loginToSpotify());

You either:

addEventListener('click', loginToSpotify);

or:

addEventListener('click', function() { loginToSpotify() });

Upvotes: 2

Related Questions