JavaScript code not working!!

Joined
Jun 13, 2023
Messages
3
Reaction score
0
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?
 
Joined
Jun 13, 2023
Messages
3
Reaction score
0
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
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
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
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
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";
 
Last edited:
Joined
Jun 13, 2023
Messages
3
Reaction score
0
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?
 
Joined
Nov 24, 2022
Messages
73
Reaction score
7
Read about DOM.
111111.jpg

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.
 
Last edited:
Joined
Jun 2, 2023
Messages
11
Reaction score
0
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top