Hi everyone! I have just started learning JavaScript, and I am struggling mightily with the captioned project. The button doesn’t return anything with my code. Can anyone point out the issues? Thanks in advance!
const userInput = document.getElementFromId("text-input");
const checkButton = document.getElementFromId("check-btn");
const endResult = document.getElementFromId("outcome");
checkButton.addEventListener("click", () => {
revisedInput = userInput.textContent.replace(/[\W_]/g,'').toLowerCase().split('');
if(revisedInput.join('') === revisedInput.reverse().join('')) {
endResult.textContent = `${userInput} is a palindrome.`;
} else {
endResult.textContent = `${userInput} is not a palindrome.`;
}
})
For your information, endResult corresponds to <p id="outcome"></p> in the html code, and it is styled by CSS to be a container that should show the result after clicking the button (since it is linked by .textContent).
For a little more clarification on when to use value and when to use textContent when you need to gather data:
Use thevalue property of an element to gather the input/selection on interactable elements such as <input>, <textarea>, <select>, etc. These are elements where some interaction can take place such as characters entered into a box, selection on screen, clicking a checkbox/radio button, etc.
Use the textContent property of an element to gather the display text of display/non-interactable elements such as <p>, <div>, <main>, <span>, etc.
we need the complete code you have (HTML/CSS/JS) to test it,please.
The JavaScript is indeed running in my editor. The challenges are checked against a hard-coded set of rules and we need to be able see what it has a specific problem with.
The “get help”-option in the challenge shows you how to post the code blocks here.
Here is the complete code. I am super confused as to why it won’t work in fCC, grateful for your help!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<title>Palindrome</title>
</head>
<body>
<h1>Palindrome</h1>
<div class="definition">
<p class="question">What is a palindrome?</p>
<br>
<p class="answer">A <span class="highlight">palindrome</span> represents a word, phrase or sentence that can be read the same no matter forwards or backwards.<br>
<br>
Numbers can be included within the phrase or the sentence as well.<br>
<br>
Do note that it ignores case, spacing and punctuation.
</div>
<h3>Try to type in the box below to see if it is a palindrome!</h3>
<div class="box">
<input id="text-input" type="text">
<button id="check-btn" type="button">Is it a palindrome?</button>
<div id="result"></div>
</div>
<p class="ending">Now you know what a palindrome is.</p>
<script src="script.js"></script>
</body>
</html>
const endResult = document.getElementById(“result”); Maybe better select query the text and give endResult a default inner text (remember how it was done inthe roleplaying game lesson)?
checkButton.addEventListener(“click”, () => { Don’t forget to check if the input field is empty and alert the user here!
(There is something missing here) revisedInput = userInput.value.replace(/[\W_]/g,‘’).toLowerCase().split(‘’); You removed all non-alphanumeric characters, so splitting is maybe not necessary here?
if(revisedInput.join(‘’) === revisedInput.reverse().join(‘’)) { For the reverse however you’ll need to split(), reverse() needs an array to work with before you join() everything. Better store the reversed text in a new variable and compare the two variables for the final result
endResult.textContent = ${userInput.value} is a palindrome.;
} else {
endResult.textContent = ${userInput.value} is not a palindrome.;
} we found something better than “textContent” to append => check above
})
Huge thanks to Daniel for spending the time to go through my code and providing hints on enhancing it!
It turned out that my original code didn’t work in freeCodeCamp because I didn’t declare my “revisedInput” variable. By adding const = in front of it, it finally worked.
I hope one day I can be as good as you guys in programming!
.