Build a Palindrome Checker - Button is not working properly

Tell us what’s happening:

I can’t get past the '“When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text Please input a value
Technically, a checkmark does appear, but the button will say ‘Please input a value’ unconditionally. When I try to move on to the ‘A is a palindrome’ and I enter ‘A’, the ‘Please input a value’ will appear

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
  <html lang='en'
  <head>
  <meta charset='UTF-8'>
     <link href="styles.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>

 <body>
  <title>Palindrome Checker MH</title>
 <input id='text-input' type='text'></input>
  <button id='check-btn'>Submit</button>
  <div id='result'></div>
   <script src="./script.js"></script>
</body>
</html>
/* file: script.js */
const textInput = document.querySelector('#text-input');
const checkbtn = document.querySelector('#check-btn');

const finalResult = document.querySelector('#result')
checkbtn.addEventListener('click', novalue);

checkbtn.addEventListener('click', onlyA);

function novalue () { if (textInput.innerContent == '', alert('Please input a value')


 ) ;}

const alphanumericOnly = str.toLowerCase();


function onlyA () { if (textInput == 'A', finalResult.innerContent = 'A is a palindrome')


  ;}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

Hi @raven1177

The str variable is not defined.

Happy coding

I changed it to textInput.toLowerCase(); Is that good? and also the please input value still shows unconditionally

What does the variable textInput store? How do you get the value that is stored in that variable?

From how I understood it, textInput stores the html input element for me to interact with the element through on javascript through the id ‘text-input’. And to get the value, I thought I would need to add .innerText or innerContent or innerHTML like this

function novalue () { if (textInput.innerText == '', alert('Please input a value')

But clearly I am wrong and I could not figure it out by thinking differently

I also tried

const textInput = document.querySelector('#text-input').value

This is correct, so you are off to a good start.

You are correct, to get the current value in a text input you use the value property. Another good start. But think about what you are doing here. You are setting textInput to the current value in the input element at the time that line executes in your code. But you want to get the value in the text input at the time the user clicks your submit button.

So it sounds like my code is getting ahead of itself by placing value there. In that case, it sounds like I should place it here, though this is wrong

function novalue () { if ( textInput.value == '', alert('Please input a value')

it should make sense with my submit button, I thought

checkbtn.addEventListener('click', novalue);

You are on the right track.

Try replacing str with it here.

Happy coding

I did it like this.

const alphanumericOnly = textInput.value.toLowerCase();

Was that supposed to directly affect the button? It didn’t solve it

Hi @raven1177

That was a part of debugging as you had an undefined variable.

For now, delete that line of code.

You have two event listeners for the same element, that call different functions.

Going of what @bbsmooth wrote, you need a way for your code to retrieve the textInput value only after the Submit button is pressed.

You already have a way of handling when the user does not enter any input. How can you combine the two situations?

Happy coding

Here is an article on the differences between .innerText and innerContent that might interest you.

It sounds like .innerText would be appropriate then. And sometimes innerContent, and not innerHTML. But you said it is not needed since I can just use .value, correct?

checkbtn.addEventListener('click', () => {novalue(); onlyA()});

From how I understand it, my script is retrieving my textInput value just by me using query selector. I need it to be retrieved after I click submit. I tried looking up ways to do that and I wondered if I used onClick but that did not help niether

click is the one to use.
You have to use one function at a time though.

I am stumped. Not even this gets the button to work properly. Also for now I removed the A is a palindrome function

const checkbtn = document.querySelector('#check-btn');

const textInput = document.querySelector('#text-input').click();

const finalResult = document.querySelector('#result')


checkbtn.addEventListener('click', novalue);


function novalue () { if (textInput == '', alert('Please input a value')) ; }

function onlyA () { if (textInput == 'A', finalResult.innerContent = 'A is a palindrome')


  ;}
 
 

You need to access the value of textInput

Right, I just left that one out in my many edits, though this doesn’t look right, I think

const textInput = document.querySelector('#text-input').value.onclick();