Build a Palindrome Checker - Stuck on the beginning

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
I have been stumped on the beginning for hours and I can’t seem to figure this step out " hen 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 ."
Any learning tips on what I am doing wrong, so I can avoid this in the future?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
  <html lang='en'
  <head>
  <meta charset='UTF-8'>
     <link href="styles.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <title>Palindrome Checker MH</title>
   <script src="./script.js"></script>
 
  <input id='text-input'></input>
  <button id='check-btn'>Submit</button>
  <div id='result'></div>
  



/* file: script.js */
const textInput = document.getElementById('#text-input')
const checkbtn = document.querySelector('#check-btn')


 if (textInput === null) {
    alert('Please input a value')
  }

const alphanumericOnly = str.toLowerCase()

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-palindrome-checker-project/build-a-palindrome-checker`Preformatted text`

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

Welcome to the forum @raven1177

Try adding an event listener.

Happy coding

4

I added it everywhere I thought would make sense. but I still couldn’t figure it out

5

textInput is null when thereis no element, which I guess is the case, considering that…

when you use getElementById do not put the #

6

btw your script file either in head tag or body tag

7

This was my best attempt. And I tried listening to the comments here but I still can’t get through past this

const textInput = document.getElementById('text-input');
const checkbtn = document.querySelector('check-btn');

check-btn.addEventListener('click', novalue);

function novalue () { if (text-input.value == '', alert('Please input a value')

 ) ;}

const alphanumericOnly = str.toLowerCase()
8 
<!DOCTYPE html>
  <html lang='en'
  <head>
  <meta charset='UTF-8'>
     <link href="styles.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="./script.js"></script>
 
  </head>
  <title>Palindrome Checker MH</title>
  
  <input id='text-input'></input>
  <button id='check-btn'>Submit</button>
  <div id='result'></div>
9

you don’t have a text-input variable

when you use querySelector you need to use a css selector, as check-btn is an id, that means using '#check-btn'

10

ah thanks for pointing those out. I actually knew about those two points but I missed updating them in the numerous edits I’ve done to this code. The alert not appearing still is a brick wall for me

const textInput = document.querySelector('#text-input');
const checkbtn = document.querySelector('#check-btn');

checkbtn.addEventListener('click', novalue);

function novalue () { if (textInput.innerContent == '', alert('Please input a value')

 ) ;}

const alphanumericOnly = str.toLowerCase()
11

Hi @raven1177

You need to place the script element below all the other code.

To tidy up the html add body element and a closing html tag.

Happy coding

2 Likes
12

I did not know the script element had to be below all other code. Is there a specific reason for that? I will do that moving forward

13

Challenge step that teaches the importance of script location

In real code (not the fCC editor) you can also use the defer or async attributes on the script element or turn it into a module using type="module" all of which will allow the script element (when loading a file) to be placed before the page content the code inside it is interacting with.

Without that, or when the script element is not placed after the content, the script can not have code that tries to interact with page content before that content has finished loading.

MDN: The Script element

14

This step is still giving me issues even though I received the checkmark for it. Even when their is text and I click the submit button, the alert appears on screen.
I tried textInput.innerContent, .textInput.innerText, and textInput.innerHTML to make sure its vhecking if the text section is empty and not targeting something else, but when I try to move on to the next step by entering ‘A’, the alert still appears

15

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