Build a Palindrome Checker Project - can't figure "inputs" out

JavaScript
1

Tell us what’s happening:

Hello, i can’t seem to figure out what i’ve done wrong here.
My console.log does nothing, yet alert happens immediately upon declaration, so i suppose i’ve made a mistake in addEventListener or in my function …

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title id="title">Palindrome Checker</title>
  </head>
  <body>
    <main>
      <div id="result">
        <input id="text-input" type="text"/>
        <button id="check-btn">BTN</button> 
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

/* file: script.js */
const text = document.getElementById("text-input");
const button = document.getElementById("check-btn");

function check(input) {
  console.log(input);
  alert("Alert!");
};

button.addEventListener("click", check(text.value));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

When you add an event listener, you should be passing a function to it (in your case the check function). If you invoke that function inside the addEventListener, then you are no longer passing a function. Instead you are passing whatever that function returns. Perhaps if your check function was returning a function then this would be accepted but in this case, your check function isn’t returning anything.

Try just specifying check (without the arguments) in addEventListener.
Then inside of check, make it look up the value of the input

1 Like
3

ah, i see

This works:

const text = document.getElementById("text-input");
const button = document.getElementById("check-btn");

function check() {
  const input = document.getElementById("text-input").value
  console.log(input);
  alert("Alert!");
};

button.addEventListener("click", check);

But then - can i even pass a function with arguments into event listener, like what my initial code was intended to do? Can i declare it right there in event listener, or do i have to go through some “hoops”?

4

You don’t need to create another const input inside the check since you already made one earlier (you called it text) to get the element. You only need to get the value of the const text inside your check.
Also I would be careful about using const inside the function because this function is supposed to get whatever the user typed and what they type will change each time (so it is not a const. The input itself as an element is a const though)

As for your question. My understanding (I am also learning js so I am not an expert), is that trying to invoke the function will not return another function that addEventListener can use. Well, unless you change your code to make it return a function. But that is beyond the scope of this exercise and your learning so far.

You can also create an “anonymous” function within the call to addEventListener but again, that is beyond the scope. I think all they want from us in this project is to utilize the skills they taught us so far (so don’t over complicate it at this time)

1 Like
5

You can wrap the handler inside an anonymous callback

const btn = document.querySelector("button");

function handleClick(evt, number) {
  console.log(evt.target); // <button>Click</button>
  console.log(number); // 10
}

btn.addEventListener("click", (evt) => handleClick(evt, 10));

But as said, that isn’t the correct thing to do here. You have access to the input element inside your check handler function, so you can just get the value property on that element inside the handler. The handler function does not need to be passed anything.

1 Like
6

Thanks everyone, it just hit me that i don’t even need an argument in this case, so i’ll settle on that as a ‘template’:

const text = document.getElementById("text-input");
const button = document.getElementById("check-btn");

function check() {
  const input = text.value
  console.log(input);
};

button.addEventListener("click", check);
1 Like
7

try not to post so much of your code here though. (unless you want us to read it so you can ask some question). We’re trying to keep the forum spoiler free.

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.