Taking the tasks one by one:
When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text “Please input a value”?
I am a bit confused as to what comes first, i tried to declare some variables in the global scope to use them in a function to check text input but not working…
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" class="image">
<h1> Is it a palindrome ?</h1>
<div id="result">
<label id="for_text" class="for_text"> Enter a text to check for a palindrome:
</label>
<input type="text" id="text-input">
<button id="check-btn" onclick="certInput()">Check</button>
</div>
<p>
A <i>palindrome</i> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing
</p>
</body>
</html>
Thank you for your feedback, i made recommended changes with no effect yet. <script src="script.js"></script> above the </body>, and changed return for console.log(“Please input a value”).
I modified your last comment so we can read the code you included. Inline html must be placed in backticks to be readable on the forum.
In your script, this code will not add an event listener because you are giving the function a second argument which is not a callback function. To correct it, remove the () parenthesis next to the function certInput
I’ve edited your code for readability. 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.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" class="image">
<h1> Is it a palindrome ?</h1>
<div id="result">
<label id="for_text" class="for_text"> Enter a text to check for a palindrome:
</label>
<input type="text" id="text-input">
<button id="check-btn">Check</button>
</div>
<p>
A <i>palindrome</i> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing
</p>
<script src="script.js">
</script>
</body>
</html>
Javascript:
const btn = document.getElementById("check-btn");
const text = document.getElementById("text-input");
const rslt = document.getElementById("result");
btn.addEventListener("click", certInput);
function certInput() {
if (text ="" || null ) {
console.log("Please input a value")
}
else {}
}
This feedback helped my thought, i was trying to target the text input first with the mistake of using a const when in fact the value could change, so i had to use a let to declare a text.value variable , that sorted me the room to equate to “” 0r null , then to return “Please input a value”. Thank you.
