JavaScript code not working!!

HS46 · Jun 13, 2023

Hi all,
This is my index.html page code :


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">

  </head>
  <body>

    <h1>Hello</h1>

    <input type="checkbox">

    <button style=":active color:red;">Click Me</button>

    <ul>
      <li class="list">
        <a href="https://www.google.com">Google</a>
      </li>
      <li class="list">Second</li>
      <li class="list">Third</li>
    </ul>
 <script src="index.js"></script>
  </body>

</html>

And below is my index.js code :


var liWord = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild;
liWord.innerHTML="Parrot";

But when run index.html in browser, nothing happens i.e. I want to replace the last list item name from "Third"  to something else for example here "Parrot" but even after refreshing hte browser nothing changes!!
Plz help.. is there anything wrong in the code?

HS46 · Jun 14, 2023

Padonak said:
what do these references mean?

Sir, that is Javascript code , if you know javascript , that is nothing strange!!
BTW , I already in my first post what it references i.e. the 3rd list item

Padonak · Jun 14, 2023

JavaScript:

//var liWord = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild;
const liWord = document.querySelector('li:last-of-type');
liWord.innerHTML="Parrot";

and do not hesitate to use the </> tag for your code

BigDady · Jun 14, 2023

I take it you are trying to change the word "third" to "parrot" using lastElementChild.
When working with nodes remember when you query them you will have an array.
Here are two ways of finding the parent node in your example.
let mainName = document.getElementsByTagName('ul');
and
let mainName = document.getElementsByTagName('*');
While the former takes us straight to the parent, the latter generates an array where the parent is the eighth element. And :
let word = mainName[8].lastElementChild; sets the parent as the UL in the code - the same as the first example.

To change the word we would use
word.innerText="Parrot";

Code:

let mainName = document.getElementsByTagName('*');
let word = mainName[8].lastElementChild;
word.innerText="Parrot";

HS46 · Jun 14, 2023

BigDady said:
I take it you are trying to change the word "third" to "parrot" using lastElementChild.
When working with nodes remember when you query them you will have an array.
Here are two ways of finding the parent node in your example.
let mainName = document.getElementsByTagName('ul');
and
let mainName = document.getElementsByTagName('*');
While the former takes us straight to the parent, the latter generates an array where the parent is the eighth element. And :
let word = mainName[8].lastElementChild; sets the parent as the UL in the code - the same as the first example.

To change the word we would use
word.innerText="Parrot";

Code:

let mainName = document.getElementsByTagName('*'); let word = mainName[8].lastElementChild; word.innerText="Parrot";

Sorry but I didn't get you!! Firstly, I'm new to JavaScript & just learning. So what do you mean by 'parent' or you meant 'parrot'??
Also, that should be innerHTML instead of 'innerText'?
And what does the asterisk in that getElelmentsByTagName('*') does?

Infinityhost · Jun 16, 2023

Read about DOM.

When You use * You get access to an array (read about arrays) of almost all elements that You see. Example var list = document.documentElement.querySelectorAll("*"); list[0] --- is <head> element, using list[0].setAttribute("id","my_head"); will add blue "id=" with orange "my_head" just like class="my_button_class". This is the way You operate on DOM.

ananniamul · Jun 21, 2023

HS46 said:
Hi all,
This is my index.html page code :

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>My Website</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello</h1> <input type="checkbox"> <button style=":active color:red;">Click Me</button> <ul> <li class="list"> <a href="https://www.google.com">Google</a> </li> <li class="list">Second</li> <li class="list">Third</li> </ul> <script src="index.js"></script> </body> </html>

And below is my index.js code :
var liWord = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild; liWord.innerHTML="Parrot"; But when run index.html in browser, nothing happens i.e. I want to replace the last list item name from "Third" to something else for example here "Parrot" but even after refreshing hte browser nothing changes!! Plz help.. is there anything wrong in the code?

This is the most common reason why JavaScript code doesn't work. Syntax errors are errors in the way that the code is written. They can be caused by missing semicolons, incorrect variable names, or other mistakes.

Not sure why drop-down is not working.	2	Mar 24, 2024
Justify-content not working	1	Mar 29, 2021
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Align separate li to right	2	Jun 19, 2024
Need help with code on website (noob)	2	Jul 18, 2022
Only one table shows up with the information	2	Mar 29, 2023
Horizontal menu bar header	2	May 12, 2021
Javascript DOM	1	Mar 29, 2023

JavaScript code not working!!

HS46

HS46

Padonak

BigDady

HS46

Infinityhost

ananniamul

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads