Click event not triggering when passing function with argument

Question

Can anybody tell me why this click event won't trigger? The function seems to work fine (except printing out to HTML but I'll come back to that).

function longestWordFunc(stringArg) {
  console.log(stringArg)
  var stringSplit = stringArg.split(" ");
  console.log(stringSplit)
  var longestWord = 0;
  
  for(var i = 0; i < stringSplit.length; i++){
    if(stringSplit[i].length > longestWord){

      longestWord = stringSplit[i].length;   
    }
    longestWord = stringSplit[i];
   };
  console.log(longestWord)
  console.log(longestWord.length)
  document.getElementsByClassName("longestWord").innerHTML = longestWord;
  document.getElementsByClassName("longestWordCount").innerHTML = longestWord.length;
};

let searchString = document.querySelector(".searchString").value;
console.log(searchString);
document.querySelector(".generate").addEventListener("click", longestWordFunc(searchString));

<input type="text" name="searchString" class="searchString">

<span class="longestWord"></span>
<span class="longestWordCount"></span>

<button class="generate">Generate</button>

Thank you in advance.

vrintle · Accepted Answer · 2018-10-06 18:42:26Z

2

You should define searchString inside the event listener of .generate. Unless, your searchString would be undefined as the user hasn't entered any string initially.

function longestWordFunc(stringArg) {
  console.log(stringArg)
  var stringSplit = stringArg.split(" ");
  console.log(stringSplit)
  var longestWord = 0;
  
  for(var i = 0; i < stringSplit.length; i++){
    if(stringSplit[i].length > longestWord){

      longestWord = stringSplit[i].length;   
    }
    longestWord = stringSplit[i];
   };
  console.log(longestWord)
  console.log(longestWord.length)
  document.getElementsByClassName("longestWord").innerHTML = longestWord;
  document.getElementsByClassName("longestWordCount").innerHTML = longestWord.length;
};
document.querySelector(".generate").addEventListener("click", () => {
  let searchString = document.querySelector(".searchString").value;
  longestWordFunc(searchString);
});

<input type="text" name="searchString" class="searchString">

<span class="longestWord"></span>
<span class="longestWordCount"></span>

<button class="generate">Generate</button>

edited Oct 6, 2018 at 18:42

answered Oct 6, 2018 at 18:13

vrintle

5,6263 gold badges19 silver badges47 bronze badges

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

3 Comments

phurst-so Over a year ago

This makes sense thank you. Is there a prefered way I could deal with the click event or is this sufficient?

vrintle Over a year ago

It is sufficient for you. Btw, it is better to get rid of console logs inside the event listeners

phurst-so Over a year ago

Ah great. Yes, I would do that once it's all working sorry. It's okay to use them for testing right?

pretzelhammer · Accepted Answer · 2018-10-06 18:11:58Z

1

longestWordFunc(searchString) returns undefined, so this line:

document.querySelector(".generate").addEventListener("click", longestWordFunc(searchString));

is getting evaluated as:

document.querySelector(".generate").addEventListener("click", undefined);

And you're not setting anything as the click event listener.

I've fixed your snippet to work below:

function longestWordFunc() {
  let stringArg = document.querySelector(".searchString").value;
  console.log(stringArg);
  var stringSplit = stringArg.split(" ");
  console.log(stringSplit);
  var longestWord = 0;
  
  for(var i = 0; i < stringSplit.length; i++){
    if(stringSplit[i].length > longestWord){

      longestWord = stringSplit[i].length;   
    }
    longestWord = stringSplit[i];
   };
  console.log(longestWord);
  console.log(longestWord.length);
  document.getElementsByClassName("longestWord").innerHTML = longestWord;
  document.getElementsByClassName("longestWordCount").innerHTML = longestWord.length;
};

document.querySelector(".generate").addEventListener("click", longestWordFunc);

<input type="text" name="searchString" class="searchString">

<span class="longestWord"></span>
<span class="longestWordCount"></span>

<button class="generate">Generate</button>

answered Oct 6, 2018 at 18:11

pretzelhammer

15.4k16 gold badges56 silver badges105 bronze badges

3 Comments

phurst-so Over a year ago

This seems really clean thanks but I dont quite understand it all sorry. Why is longestWordFunc(searchString) undefined? Isn't it being set at let searchString = document.querySelector(".searchString").value;. prior to it being used? Also, isn't document.querySelector(".generate"). what it is listening to?

pretzelhammer Over a year ago

longestWordFunc doesn't have a return statement so when you invoke it with any value it returns undefined.

phurst-so Over a year ago

You've been really helpful thank you. Could I ask, if you have any advice about how to draw the longest word from my loop? I've fixed the code since the above post so I can find the correct word count of the longest word, but I'm struggling to grab the word itself.

Collectives™ on Stack Overflow

Click event not triggering when passing function with argument

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related