Palindrome Checker test

JavaScript
1 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FCC Palindrome Checker</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1> Pal Check #2</h1>
  <p>A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case, and spacing.
  <p>
  <div id="fillIn">
    <input id="text-input" type="text" placeholder="Please input a value." </input>
    <button id="check-btn" onclick="checkPalindrome()">Click</button>
    <!--value-->
    <div id="result">
    </div>
  </div>
  <script src="index.js"></script>
</body>

</html>


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

function checkPalindrome() {
  const valueWord = input.value;
  const regEx = /[^A-Za-z0–9]/gi;
  const newWord = valueWord.toLowerCase().replace(regEx, "");
  const reverseWord = newWord.split("").reverse().join("");

  if (("onclick", input.value === "")) {
    alert("Please input a value");
    
  } else if (("onclick", newWord === reverseWord)) {
    resultWord = input.value + " is a palindrome";
  } else {
    resultWord = input.value + " is a not palindrome";
  }
  result.innerHTML = resultWord;
}

button.addEventListener("onclick", checkPalindrome());

The “alert”, css, and the palindrome work in other editors….like codepen. It does not work in free code camp.
I have tried: clearing my browser history. I have made sure that fcc has permission to open alerts and pop-ups.
I understand that this is not an elegant solution, but it does work elsewhere. I don’t know how to fix this.

2

Please post your full code for the html and css so the forum can assist.

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

Happy coding

3 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FCC Palindrome Checker</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1> Pal Check #2</h1>
  <p>A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case, and spacing.
  <p>
  <div id="fillIn">
    <input id="text-input" type="text" placeholder="Please input a value." </input>
    <button id="check-btn" onclick="checkPalindrome()">Click</button>
    <!--value-->
    <div id="result">
    </div>
  </div>
  <script src="index.js"></script>
</body>
</html>

css
body {
background-color: tan;
}

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

function checkPalindrome() {
  const valueWord = input.value;
  const regEx = /[^A-Za-z0–9]/gi;
  const newWord = valueWord.toLowerCase().replace(regEx, "");
  const reverseWord = newWord.split("").reverse().join("");

  if (("onclick", input.value === "")) {
    alert("Please input a value");
    
  } else if (("onclick", newWord === reverseWord)) {
    resultWord = input.value + " is a palindrome";
  } else {
    resultWord = input.value + " is a not palindrome";
  }
  result.innerHTML = resultWord;
}

button.addEventListener("onclick", checkPalindrome());

I have tried:

  1. Clearing my browser history
  2. Clearing and re-pasting my code.
  3. I have tried two versions of my solution that work in other editors.
  4. I know that the code solution is not elegant…but it works elsewhere.
    Thanks ahead of time for any help given.
4

The JS file has to be named script.js

if (("onclick", input.value === ""))

else if (("onclick", newWord === reverseWord))

The conditional code is not correct.

" is a not palindrome" is not what is asked for as the text.

button.addEventListener("onclick", checkPalindrome());

Do not invoke () the callback handler, you only pass the name of the function.

The event is "click", not "onclick" when using addEventListener

"onclick" is when used as an event attribute on elements. Which you also have in your HTML. Pick one of the two, don’t use both.

resultWord must be declared.

Your code does not pass the 1 eye for of 1 eye test.

5

I moved your other duplicate post over here.

It is best not to create duplicate posts.
It is best to keep all of your posts together in the same thread :+1:

6

Thank you, I will remember for next time.

7

Thank you! I appreciate the help!

8

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