JS: Adding a named function inside addEventListener

Question

Question: I have a function called

play() {
//Many lines of code here
}

now I have a button in index.html, having a class="playButton"

I want to run the function play(); as soon as the button with class="playButton" is pressed.

Therefore, I wrote following code inside index.js

document.querySelector.(".playButton").addEventListener("click", play () );

What is the correct way to put play function after "click", in eventListener?

Abbreviated source from repository linked to by OP in comments: armaghan05/rollthedice

var p1Name = "P1";//prompt("Please enter 1st player's name");
var p2Name = "P2";//prompt("Please enter 2nd player's name");

document.querySelector(".player1").innerHTML = p1Name;
document.querySelector(".player2").innerHTML = p2Name;

function play() {
  // FOR DICE ONE:
  var randomNumber1 = (Math.floor(Math.random() * 6) + 1);
  var randomImageName1 = "dice" + randomNumber1 + ".png";
  var randomSource1 = "images/" + randomImageName1;
  document.querySelector(".img1").innerHTML = randomSource1;

  // FOR DICE TWO:
  var randomNumber2 = (Math.ceil(Math.random() * 6));
  var randomImageName2 = "dice" + randomNumber2 + ".png";
  var randomSource2 = "images/" + randomImageName2;
  document.querySelector(".img2").innerHTML = randomSource2;

  // MESSAGE TO PLAYERS:
  if (randomNumber1 > randomNumber2) {
    document.querySelector(".mainHeading").innerHTML = p1Name + " wins ";
    document.querySelector(".player1").innerHTML = p1Name + "  ";
    document.querySelector(".player2").innerHTML = p2Name + "";

  } else if (randomNumber1 < randomNumber2) {
    document.querySelector(".mainHeading").innerHTML = p2Name + " wins "
    document.querySelector(".player2").innerHTML = p2Name + "  ";
    document.querySelector(".player1").innerHTML = p1Name + "";

  } else {
    document.querySelector(".mainHeading").innerHTML = "Scheiße! ! It is a draw ";
    document.querySelector(".player1").innerHTML = p1Name;
    document.querySelector(".player2").innerHTML = p2Name;
  }
}

<div class="container">
  <h1 class="mainHeading bigHeading">Welcome !!! </h1>
  <div class="dice">
    <p class="player1">Player 1</p>
    <div class="img1"></div>
  </div>
  <div class="dice">
    <p class="player2">Player 2</p>
    <div class="img2"></div>
  </div>
</div>
<div class="playButton">
  <button class="playButton" type="button" name="Play" onclick="play();">Play</button>
</div>

If I'm understanding right, just pass "play" without the parentheses. If that doesn't work describe the behavior you're seeing. Its unclear what the problem actually is. — zero298, Dec 10 '20 at 12:52
Sir thanks for your reply. I did try using only play only like following: document.querySelector.(".playButton").addEventListener("click", play); but it doesn't work. The only way it works is if I write code in (index.html) and use following: onClick="play()" But there must be a way for it to work in only JS as well. IF you want to see a working website, for reference, you can check it here:https://armaghan05.github.io/rollthedice/ — mr nothing, Dec 10 '20 at 13:04
Your question is difficult to answer without code. I have added a slightly edited and abbreviated version of your code from the repository you linked to your question. — zero298, Dec 10 '20 at 13:49
Thank you Sir. Any ideas about how to just trigger a function on click? I mean it is a very basic functionality. Shouldn't be so much of a problem. I also had it working through onClick="play ()" in Html but I heard it is not a good practice. We should be able to make that work through JS, shouldn't we? — mr nothing, Dec 10 '20 at 14:19
Yes, [see my answer](https://stackoverflow.com/a/65235866/691711). I tried to get as close to your code as possible. — zero298, Dec 10 '20 at 14:21
Thanks Sir, just adding name of the named function worked finally. Really appreciate your guidance. God Bless you! — mr nothing, Dec 13 '20 at 23:39

score 0 · Answer 1 · answered Dec 10 '20 at 12:59

Like @zero298 suggested, their is a big differences between

document.querySelector.(".playButton").addEventListener("click", play () );

and the similar:

document.querySelector.(".playButton").addEventListener("click", play );

The () are what tell your code to execute this function, so in the first example you pass the return value of the function but instead what to pass the function itself, using an intermediate variable may help understand:

const playResult = play ();
document.querySelector.(".playButton").addEventListener("click", playResult);

// vs:
const playHandler = play; // the function itself !
document.querySelector.(".playButton").addEventListener("click", playHandler);

Thank you for reply sir, but if you are suggesting putting play(); function inside a constant or variable and then using a variable after "click", ?, then I tried this and it still did not work. — mr nothing, Dec 10 '20 at 13:14

score 0 · Answer 2 · answered Dec 10 '20 at 13:52

As stated, you need to just pass play to the event listener. Do this after you define play. Directly after you define function play() {...}, query for the element and attach the listener:

document.querySelector(".playButton").addEventListener("click", play);

In context:

var p1Name = "P1";//prompt("Please enter 1st player's name");
var p2Name = "P2";//prompt("Please enter 2nd player's name");

document.querySelector(".player1").innerHTML = p1Name;
document.querySelector(".player2").innerHTML = p2Name;

function play() {
  // FOR DICE ONE:
  var randomNumber1 = (Math.floor(Math.random() * 6) + 1);
  var randomImageName1 = "dice" + randomNumber1 + ".png";
  var randomSource1 = "images/" + randomImageName1;
  document.querySelector(".img1").innerHTML = randomSource1;

  // FOR DICE TWO:
  var randomNumber2 = (Math.ceil(Math.random() * 6));
  var randomImageName2 = "dice" + randomNumber2 + ".png";
  var randomSource2 = "images/" + randomImageName2;
  document.querySelector(".img2").innerHTML = randomSource2;

  // MESSAGE TO PLAYERS:
  if (randomNumber1 > randomNumber2) {
    document.querySelector(".mainHeading").innerHTML = p1Name + " wins ";
    document.querySelector(".player1").innerHTML = p1Name + "  ";
    document.querySelector(".player2").innerHTML = p2Name + "";

  } else if (randomNumber1 < randomNumber2) {
    document.querySelector(".mainHeading").innerHTML = p2Name + " wins "
    document.querySelector(".player2").innerHTML = p2Name + "  ";
    document.querySelector(".player1").innerHTML = p1Name + "";

  } else {
    document.querySelector(".mainHeading").innerHTML = "Scheiße! ! It is a draw ";
    document.querySelector(".player1").innerHTML = p1Name;
    document.querySelector(".player2").innerHTML = p2Name;
  }
}

document.querySelector(".playButton").addEventListener("click", play);

<div class="container">
  <h1 class="mainHeading bigHeading">Welcome !!! </h1>
  <div class="dice">
    <p class="player1">Player 1</p>
    <div class="img1"></div>
  </div>
  <div class="dice">
    <p class="player2">Player 2</p>
    <div class="img2"></div>
  </div>
</div>
<div class="playButton">
  <button class="playButton" type="button" name="Play">Play</button>
</div>

JS: Adding a named function inside addEventListener

2 Answers2