How to change link color by using only JavaScript not CSS or HTML

Question

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>

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; }; — franklylately
– franklylately, Commented Mar 9, 2021 at 2:51

Miu · Accepted Answer · 2021-03-09 03:02:51Z

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>.

Aiman_Irfan · Accepted Answer · 2021-03-09 02:51:28Z

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

answered Mar 9, 2021 at 2:51

Aiman_Irfan

3755 silver badges15 bronze badges

1 Comment

Nathaniel Flick Over a year ago

OP wants to do this using JavaScript only.

zergski · Accepted Answer · 2021-03-09 03:00:14Z

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.

edited Mar 9, 2021 at 3:00

answered Mar 9, 2021 at 2:48

zergski

8454 silver badges10 bronze badges

2 Comments

Claire Over a year ago

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?

zergski Over a year ago

edited answer. sections is a collection and needs an index

Collectives™ on Stack Overflow

How to change link color by using only JavaScript not CSS or HTML

3 Answers 3

Issue

Solution

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Issue

Solution

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related