Alert test case issue - Build a Palindrome Checker Project

JavaScript
1

Tell us what’s happening:

Here I have been attempting the problem of Build a palindrome checker, and it passes every single one of the test cases so far EXCEPT for the 4th test case, which states the following:

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 .

This has been copied word to word from the page. This is the only test case I do not pass, yet on preview, I see that it does perform the desired functionality. Could someone please help me figure this out please? (I may be missing something incredibly dumb, please forgive me for that :frowning: )
(I’ve excluded the code for checkPalindrome function because that is not related to the issue at hand.)

Your code so far

<!-- file: index.html -->
<html>
  <head><script src="./script.js"></script>
  </head>
  <input type="text" id="text-input">

  <button type="button" id="check-btn" onclick="clickyBoi()">Click Me :)</button>

  <div id="result"></div>
</html>

/* file: script.js */
function clickyBoi() {
  document.querySelector("#check-btn").onclick = () => {
    const input = document.getElementById("text-input").value;

    console.log(`"${input}"`)
    if(input == "") {
      document.getElementById("result").innerHTML = "";
      return alert("Please input a value")
    }

    const isPal = checkPalindrome(input.toUpperCase());

    document.getElementById("result").innerHTML = `${input} is ${isPal ? "" : "not "}a palindrome`
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

1 Like
2

Question for you. How many times do you have to click the “Click Me” button before the alert shows up?

2 Likes
3

I’m confused by this function. Is the alert actually showing up for you? Why put a function inside of a function instead of just having the target behavior in your clickyBoi function?

1 Like
4

Oh, I just realised what’s going on… I’m really sorry about the confusion. I just figured it out after reading your message. Initially it wasn’t inside a function actually, later on I just thought why not put it inside a function but I kinda messed up as you see. Thanks for helping JeremyLT & bbsmooth!

3 Likes
5

For all of you that are wondering why your code does not pass further than the 3rd test and doesn’t run anything in the console, it’s because you have to link the javascript, or use the script tag right in the HTML.

1 Like
6

hello, how did you exactly solved this issue? i am facing the same issue. here is my code:

const extendBox = () => {
const box = document.getElementById(‘box’);
const result = document.getElementById(‘result’);
box.style.height = ‘150px’;
result.style.marginTop = ‘20px’;
}

const isPalindrome = () => {
const result = document.getElementById(‘result’);
const textInput = document.getElementById(‘text-input’);

const checkButton = document.getElementById('check-btn');

checkButton.addEventListener('click', () => {

    const emptyValue = textInput.value.trim();

    const inputValue = textInput.value;
    const validInput = inputValue.replace(/[^a-zA-Z0-9]/g, '');
    const lowercasedValue = validInput.toLowerCase();
    const reversedValue = lowercasedValue.split('').reverse().join('');

  if (emptyValue === '') {
    alert("Please input a value");
    } else {
    if (lowercasedValue === reversedValue) {
        extendBox();
        result.innerHTML = `${inputValue} is a palindrome!`;
    } else {
        extendBox();
        result.innerHTML = `${inputValue} is not a palindrome!`;
    }
}

});}

7

This is the same issue you posted here: Palindrome Checker Topoic

And the problem was about something you did in your HTML which you did again on your JavaScript file (clicking event).

You can read my reply on your topic.