I cant get past step 4 of the palindrome checker javascript

JavaScript
1

I cannot solve this goddamn project, I’ve literally tried everything, here’s my code:
const checkBtn = document.getElementById(“check-btn”);
const result = document.getElementById(“result”);
const input = document.getElementById(“text-input”);

checkBtn.addEventListener(“click”, () => {
if (input.value == “”) {
alert(“Please input a value”);
} else {
const cleaned = input.value.replace(/[^a-z0-9]/g, “”);
let letters = […cleaned];
let reversed_word = letters.reverse().join(“”).toLowerCase();
if (reversed_word === cleaned) {
result = ${input.value} is a palindrome;
} else {
result = ${input.value} is not a palindrome;
}
}

});

Thank you for your time!

2

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

1 Like
3

ok

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

checkBtn.addEventListener("click", () => {
  if (input.value == "") {
    alert("Please input a value");
  } else {
    const cleaned = input.value.replace(/[^a-z0-9]/g, "");
    let letters = [...cleaned];
    let reversed_word = letters.reverse().join("").toLowerCase();
    if (reversed_word === cleaned) {
      result = `${input.value} is a palindrome`;
    } else {
      result = `${input.value} is not a palindrome`;
    }
  }
  
});

here it is

4

please share also your javascript and a link to the project

1 Like
5

but it is the javascript

6

sorry, please share also your html;

1 Like
7

oh ok

<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>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Palindrome Checker</h1>
        <input id="text-input"></input>
        <button id="check-btn">Check</button>
        <p id="result"></p> 
    </main>
    <script src="index.js"></script>
  </body>
</html>
8

Are you able to confirm that any of your JS is running?

You could try putting a console.log() at the start of your code to print “Test” to the console, for example.

1 Like
10

It ain’t working AAAAAAAAAAAA

11

yeah

how do you link the javascript to the html file?

1 Like
12

The script tag in the HTML is “fetching” the Javascript file. The file you are fetching is index.js. The file you should be fetching is script.js.

If you do that, you should be able to test that at least the alert when the field is empty works just fine.

13

oops, I did that and completed the project. Thank you all for reminding me I need to get myself checked.

14

Tell us what’s happening:

I (again) cannot get past step four in roman numeral converter project

Your code so far

<!-- file: index.html -->
<!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>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <input id="number"></input>
        <button id="convert-btn">Convert</button>
        <p id="output"></p>
    </main>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */


/* file: script.js */
const input = document.getElementById("number");
const convertBtn = document.getElementById("convertBtn");
const output = document.getElementById("output");

const romanNumerals = [
  ["M", 1000],
  ["CM", 900],
  ["D", 500],
  ["CD", 400],
  ["C", 100],
  ["XC", 90],
  ["L", 50],
  ["XL", 40],
  ["X", 10],
  ["IX", 9],
  ["V", 5],
  ["IV", 4],
  ["I", 1]
];

convertBtn.addEventListener("click", () => {
  let num = parseInt(input.value);

  if (isNaN(num)) {
    output.innerText = "Please enter a valid number";
  } else if (num < 1) {
    output.innerText = "Please enter a number greater than or equal to 1";
  } else if (num > 3999) {
    output.innerText = "Please enter a number less than or equal to 3999";
  } else {
    let result = "";

    for (const [roman, arabic] of romanNumerals) {
      while (num >= arabic) {
        result += roman;
        num -= arabic;
      }
    }

    output.innerText = result;
  }
});

Your browser information:

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

Challenge Information:

Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

15

What is the fourth test? How did you get stuck in your debugging?

16

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

17

Welcome to the forum @subhanowaiskhan

Did you notice the message in the console?

Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)

Happy coding

18

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

Thanks.

19

Sorry, I completed the project a few months ago and can’t remember what solved it😅