I need some help in proceeding forward with the JavaScript aspect. I have tried multiple methods including this, but it does not seem to be working properly.
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">
<link rel="stylesheet" href="styles.css">
<title>Palidrome Checker</title>
</head>
<body>
<h1>Palidrome Checker</h1>
<p>Enter text to check for a palidrome:</p>
<input id="text-input">
<button id="check-btn" onclick="input-btn()">Check</button>
<div id="result">A palidrone id a word or sentencethat's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</div>
<script src="script.js"></script>
</body>
</html>
Hi Fsg12491! It appears that your button event listener may be mislabeled for the element that you’re attempting to evaluate. As your code stands currently, when your “check” button is clicked, your code is attempting to evaluate whether or not “text-input” is empty. The problem that you’re running into is happening because javascript has stored this value under the name “input” rather than “text-input” (which was the name in your html file). Give this a shot and see if it helps you with your next steps:
button.addEventListener("click", function() {
if (input.value === "") {
alert("Please input a value");
}
I’m now having another issue. I clicked close on freeCodeCamp’s website for a moment. Now I can’t get back my preview on freeCodeCamps website text editor when I went back to the website
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Palidrome Checker</title>
</head>
<body>
<h1>Palidrome Checker</h1>
<p>Enter text to check for a palidrome:</p>
<input id="text-input">
<button id="check-btn" onclick="inputBtn()">Check</button>
<div id="result">A palidrone is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</div>
<script src="script.js"></script>
</body>
</html>
Sure thing! In the code section in my reply, you’ll notice that I changed the portion of your code that originally read “text-input” and replaced it with “input.value”. This corrects the mislabeling of the element that you wanted to evaluate. I hope this makes more sense.
Describe your issue in detail here.
I need some help with the #text-input containing only the letter A and how to return the string A is a palindrome. The next several steps immediately following this are very similar in terms of syntax. I was wondering if someone could give me some specific tips on correcting this issue
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">
<link rel="stylesheet" href="styles.css">
<title>Palindrome Checker</title>
</head>
<body>
<h1>Palindrome Checker</h1>
<p>Enter text to check for a palindrome:</p>
<input id="text-input">
<button id="check-btn" onclick="input-btn()">Check</button>
<div id="result">A palindrone id a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</div>
<script src="script.js"></script>
</body>
</html>