1

I want to change the BOOK link to red color. how can I change it by JavaScript without adding an id or class? I tried using sections but it's not working. Thanks.

var sections = document.getElementsByClassName('section'); sections.getElementsByTagName("a")[2].style.color="red"; sections.getElementsByTagName("li")[2].style.color="red";
<section> <ul> <li><a href="">1</a></li> </ul> </section> <section> <ul> <li><a href="">2</a></li> </ul> </section> <section> <ul> <li><a href="">3</a></li> </ul> </section> <section> <div class="Search-view"> <ul> <li><a href="">Search</a></li> <li><a href="">View </a></li> <!-- change book to red --> <li><a href="">Book</a></li> <li><a href="">Sell</a></li> <li><a href="">Get</a></li> </ul> </div> </section>

Improve this question
2
  • sections is an HTML collection Commented Mar 9, 2021 at 2:49
  • stackoverflow.com/questions/524696/… has a great method to inject CSS -- you can simply target the appropriate selector with css nth-child: section .Search-view ul li:nth-child(2) a { color: red; }; Commented Mar 9, 2021 at 2:51

3 Answers 3

Reset to default
2

Issue

.getElementsByClassName('section') is used although there is no tag with class .section. It gets nothing.

Solution

// Get all a tags const allA = document.querySelectorAll('a'); allA.forEach(a => { // If text in a tag is 'book' if (/^book$/i.test(a.textContent)) { // Change color to red a.style.color = 'red'; } })
<section> <ul> <li><a href="">1</a></li> </ul> </section> <section> <ul> <li><a href="">2</a></li> </ul> </section> <section> <ul> <li><a href="">3</a></li> </ul> </section> <section> <div class="Search-view"> <ul> <li><a href="">Search</a></li> <li><a href="">View </a></li> <!-- change book to red --> <li><a href="">Book</a></li> <li><a href="">Sell</a></li> <li><a href="">Get</a></li> </ul> </div> </section>

Personally, I recommend adding an ID to the a tag of 'book' like <a id="book">Book</a>.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I guess you define section as a class and then you try to override it with Tag. Because it said the error is on the second line, so I guess the override fail. Try to remove the class and use the Tag on the section variable

Improve this answer

1 Comment

OP wants to do this using JavaScript only.
1

There are better ways of doing this.. like through css and its :nth-child() pseudo selector. But with your code just do this:

var sections = document.getElementsByTagName('section'); sections[sections.length-1].getElementsByTagName("li")[2].getElementsByTagName("a")[0].style.color="red";

With only CSS just add this ruleset to your stylesheet

.Search-view li:nth-child(3) a { color: red; }

But ids and classes are you friends. Use them.

Improve this answer

2 Comments

Thanks Zergski, I am trying to practice my js skills, so I want to change it only by js. but i tried your js code, looks not working, could you pls expain more?
edited answer. sections is a collection and needs an index

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.