Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

 Hello everyone, my project works fine in VScode and works fine in Brackets, but  here I'm getting an error: TypeError: Cannot read properties of undefined (reading 'trim') on this site

The text input works as expected but you are unable to get any response from clicking the SUBMIT button except my css reverts the text-input field’s background color, which it should, and im getting no errors in the console and also no console.log messages either even if I put it at the top of my script.js file, what is going on here?

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">
    <title>fccPalindromeChallenge</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="parent">
  <div class="child">
    <p>Input some text:</p>
    <input id="text-input" autocomplete="off">
    </div>
    <div class="child">
    <p>Check if it's a palindrome:</p>
    <button id="check-btn" class="child">SUBMIT</button>
    </div>
    <div class="child">
    <div id="result" class="child">&nbsp;</div>
    </div>
</div>

    <script src="/script.js"></script>
</body>
</html>

/* file: styles.css */
html, body {
    height: 100%; 
    border: 1px solid #ad2;
    background-image: linear-gradient(to top left, darkred, darkorange);
    background-repeat: no-repeat;
    background-size: cover;
    }
    body {
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    height: 100%;
    }
p {
    color:darkgreen;
    width: 175;
    margin: auto; 
}
.child {
    display: flex;
    align-items: center;
  }
  
  .child p {
    margin: 0;
  }

#check-btn {
    border: 1px solid #ad2;
    background-color: darkgreen;
    color: lightcoral;
    width: 64px;
    margin: 10px; 
}
#text-input {
    border: 1px solid #ad2;
    background-color: darkgreen;
    color: lightcoral;
    width: 300px;
    margin-left: 10px;
}

#text-input:focus {
    background-color: #0f0;
    color: maroon;
  }

#result{
    background-color: darkgreen;
    color: lightcoral;
    width: 300px;
}



/* file: script.js */
const txt = document.getElementById("text-input");
const btn = document.getElementById("check-btn");
const res = document.getElementById("result");
res.setAttribute("readonly", true);
btn.addEventListener("click", () => { 
    console.log("button clicked");
    let str = txt.value = undefined ? '' : txt.value.trim();
    if (str.length < 1){
        alert("Please input a value");
    } else if (str.length === 1){
        res.innerHTML = str + " is a palindrome!";
    } else {
    const textin = txt.value.replace(" ", "").toUpperCase().split("").join("");
    const fliptxt = textin.split("").reverse().join("");
    console.log("formatted: ", textin, ", reversed: ", fliptxt, ", Original: ", str);
    if (textin === fliptxt) { 
        res.innerHTML = str + " is a palindrome!"; 
    } else { 
        res.innerHTML = str + " is 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/122.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

In your button click event handler, your ternary operator should have two equal signs to check if text.value is undefined. Try typing nothing into the text input and submitting it, and I think you should get the same error

1 Like
3

Thanks for the quick reply, I changed it to

let str = txt.value == undefined ? '' : txt.value.trim();

but it didn’t make a difference, I also tried pressing SUBMIT button with no entered text, no alert showed up, Also, the only reason I know about the error I’m getting is that it reports the error ONLY if I run the tests, the site console shows me no errors (unless I create an error purposefully) and no log output.

4

Welcome to the forum @Wraithious

Place a dot before the back slash, then your js will link to your html

Happy coding

1 Like
5

Thank you very much, That was the problem, I’m suprised it worked in VScode and brackets

1 Like
6

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