Palindrome Project

JavaScript
22 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Palindrome Project</title>
    <link rel="stylesheet" href="styles.css" /></head><body><input id="text-input" here">
<button id="check-btn" onlick="checkPalindrome()">Click</button>
<div id="result"></div>
<span id="result"></span>
<p id="result"></p></body></html>


document.getElementById("check-btn").addEventListener("click", function() {
    if(document.getElementById("text-input").value =="") {
      alert("Please input a value");
    }
  });

I added to the standard start-up coding. But it didn’t work. I exactly couldn’t understand how to call the index because I already used get.Element.Id syntax.

23

you still need the script element that links to the script.js file. You may want to review one of the previous practice projects

24 
const input = document.getElementById("text-input");
const button = document.getElementById("check-btn");
const result = document.getElementById("result");
getElementById("check-btn").addEventListener("click", function() {
    if(document.getElementById("text-input").value =="") {
      alert("Please input a value");
    }
  });

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" /></head><body><input id="text-input" here">
<button id="check-btn" onlick="checkPalindrome()">Click</button>
<div id="result"></div>
<span id="result"></span>
<p id="result"></p></body></html>

Still, something is wrong; it didn’t work. I am curious if in the project it is expected to code in a specific method or any way that works that will be approved.

25

you still don’t have the script element in your html file. Are you maybe ignoring this sentence I keep repeating?
You can ask about the things we say if you don’t know what they mean.

26 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Palindrome Project</title>
    <link rel="stylesheet" href="styles.css" /></head><body><script>document.getElementById("text-input");</script><script>document.getElementById("check-btn");</script><input id="text-input" here">
<button id="check-btn" onlick="checkPalindrome()">Click</button>
<div id="result"></div>
<span id="result"></span>
<p id="result"></p></body></html>


const input = document.getElementById("text-input");
const button = document.getElementById("check-btn");
const result = document.getElementById("result");
getElementById("check-btn").addEventListener("click", function() {
    if(document.getElementById("text-input").value =="") {
      alert("Please input a value");
    }
  });

As you can see, it didn’t work again. As far as I know, if you call by using document.getElementById syntax in a script, you don’t need to integrate again in HTML. This is optional; that’s why I’m trying to change the possible solutions.

27

You need to link to the script.js file using the script element. Place it before the closing </body> element.

Review this

Example:

<script src="myScript.js"></script>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

28

I think you’re not quite understanding what you need to do.
Have you read the article which I linked to?

All of your Javascript code should stay in the script.js file.
In your HTML document you should have a script element at the bottom, directly before the closing body tag.
This script element is used to link to the script.js file. Look at the example in the linked article to see how to do this.

When the document loads it will then also load the Javascript code in the script.js file.

29 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Palindrome Project</title>
    <link rel="stylesheet" href="styles.css" /></head><body><input id="text-input" here">
<button id="check-btn" onlick="checkPalindrome()">Click</button>
<div id="result"></div>
<span id="result"></span>
<p id="result"></p><script src="myScript.js"></script></body></html>

type or paste code here

const button = document.getElementById("check-btn");
const result = document.getElementById("result");
getElementById("check-btn").addEventListener("click", function() {
    if(document.getElementById("text-input").value =="") {
      alert("Please input a value");
    }
  });

```It isn't approved.
30

That was an example

Your file is not named myScript it is named script as you can see in the editor.

31

You should not add JavaScript code within the html element for the FCC curriculum project.

32

Thank you, it shows another error, which is getElementById isn’t defined.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Palindrome Project</title>
    <link rel="stylesheet" href="styles.css" /></head><body><input id="text-input" here">
<button id="check-btn" onlick="checkPalindrome()">Click</button>
<div id="result"></div>
<span id="result"></span>
<p id="result"></p><script src="script.js"></script></body></html>


    if(document.getElementById("text-input").value =="") {
      alert("Please input a value");
    }
  });

type or paste code here
33

Please post all your JavaScript code.

If you still have this code:

getElementById("check-btn").addEventListener("click", function() {

Then you need to access getElementById on the document as you are doing elsewhere.

document.getElementById('someID')

34 
const button = document.getElementById("check-btn");
const input = document.getElementById("text-input");
getElementById("check-btn").addEventListener("click", function() {
    if(document.getElementById("text-input").value =="") {
      alert("Please input a value");
    }
  });

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" /></head><body><input id="text-input" here">
<button id="check-btn" onlick="checkPalindrome()">Click</button>
<div id="result"></div>
<span id="result"></span>
<p id="result"></p><script src="script.js"></script></body></html>

If what you mean is const button = document.getElementById(“check-btn”); I added it but still the same error occurs.

35

Your HTML is ok now.
In the script file, that alert will work with a tweak to your code.
You’ve defined button and input correctly, so you can now use them in place of getElementById elsewhere.
For instance, you can now add the event listener directly to button.
You can also modify the if condition to use input, instead of getElementById.
(The reason the getElementById undefined error is thrown is because it is a document method, so you need to include document on the third line).

36

btw, this attribute in your html is misspelled

but you should not have both onclick and the event listener on the same element

37

You should have only one element with id=“result”.

1 Like
38 
const button = document.getElementById("check-btn");
const input = document.getElementById("text-input");
document.addEventListener("click", function() {
    if(document.getElementById("input").value =="") {
      alert("Please input a value");
    }
  });

```<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Palindrome Project</title>
    <link rel="stylesheet" href="styles.css" /></head><body><input id="text-input" here">
<button id="check-btn">Click</button>
<p id="result"></p> <script src="script.js"></script></body></html>

I think it seems better now. But another error occurred: Uncaught TypeError: Cannot read properties of null (reading 'value')
39

do you have an element with that id? if getElementById doesn’t find an element it returns null

40

Isn’t that enough to use id?

<input id="text-input" here">
<button id="check-btn">Click</button>
41

none of those elements have an id equal to "input", so none of those elements is found by getElementById

1 Like