How to use javascript function for more than one tag with similar id?

Question

I am using javascript to change the color of the text of a tag by mouseover function on other tag written in html. ex:

function mouseoverbox1() {
  var mypara = document.getElementById("a1");
  mypara.style.color = "green";
}

<div onmouseover="mouseoverbox1()">
  <a id="a1">Color</a>
  <a id="a1">Names</a>
  <a id="a1">Places</a>
</div>

Now as I run the code only the color of tag "Color" changes to green and not of Names and Places. Is there any way that my function could accept the changes to all anchor tags with similar id???

You cannot have multiple a tags with same IDs. You need to use classes for that. — Vinod Bhavnani
– Vinod Bhavnani, Commented Jan 3, 2018 at 8:36
You can't have same id for several tags in your HTML DOM. Furthermore, if you want to keep this ugly DOM, use getElementsByAttribute( "id", "a1") instead of getElementById. — Stéphane Ammar
– Stéphane Ammar, Commented Jan 3, 2018 at 8:37
Possible duplicate of JavaScript and getElementById for multiple elements with the same ID — Ole Haugset
– Ole Haugset, Commented Jan 3, 2018 at 8:40

brk · Accepted Answer · 2018-01-03 08:47:30Z

id need to be unique.The same objective can be met using document.querySelectorAll and a class, since multiple elements can have same class

//get all the elements with same class name
// iterate it using array#forEach menthod
document.querySelectorAll('.a1').forEach(function(item) {
  // add event to each of the element
  item.addEventListener('mouseover', function(e) {
    this.style.color = "green";
  })
})

<div>
  <a class="a1">Color</a>
  <a class="a1">Names</a>
  <a class="a1">Places</a>
</div>

Note: This will color individual text on mouseover, but if the requirement is to color all the text at once , then add the eventhandler to the parent element

dome2k · Accepted Answer · 2018-01-03 08:49:12Z

3

You should use classes instead.

In Javascript you can then get an array of all elements with the same class.

function handleBoxMouseover () {
  // Get all child elements with the class "a1" and save them into an array
  var childElements = document.getElementsByClassName('a1');

  // iterate through the new array and change the color by the array index
  for (var i = 0; i < childElements.length; i++) {
    childElements[i].style.color = 'green';
  }
}

<div onmouseover="handleBoxMouseover()">
  <a class="a1">Color</a>
  <a class="a1">Names</a>
  <a class="a1">Places</a>
</div>

Just FYI:

Instead of changing the inline-styles you could also add a class to the childElements to change the color.

edited Jan 3, 2018 at 8:49

answered Jan 3, 2018 at 8:41

dome2k

8677 silver badges13 bronze badges

3 Comments

Karam Jabareen Over a year ago

i`m just adding an answer like that :D

brk Over a year ago

this will color all the text at once

dome2k Over a year ago

@brk that's right. I wanted to keep it the same approach as the op. Your solution would work for just separated onmouseover checks.

Community · Accepted Answer · 2020-06-20 09:12:55Z

Add mouseoverbox1() on each a instead of the parent div with parameter this. Then inside the function first reset the color property of all a. Finally set color only to the currently passed a.

Please Note: The id should be unique in a document. You can use class instead.

Try the following way:

function mouseoverbox1(that){
  document.querySelectorAll("#tagContainer > a.a1").forEach(function(el){
    el.style.color = "";
  });
  that.style.color = "green";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tagContainer">
    <a class="a1" onmouseover="mouseoverbox1(this)">Color</a>
    <a class="a1" onmouseover="mouseoverbox1(this)">Names</a>
    <a class="a1" onmouseover="mouseoverbox1(this)">Places</a>
</div>

This is a bad solutions in many ways. It fails to address the duplicate ID problem, and it would target all anchor tags on the whole page.
@connexo, I have updated my answer. Please have look. Thanks for helping me to improve my answer.

gurvinder372 · Accepted Answer · 2018-01-03 08:43:18Z

Is there any way that my function could accept the changes to all anchor tags with similar id???

Ids must be unique, or you will get into issues like this.

That said, you shouldn't be using getElementById if you want to keep the id same, use querySelectorAll instead

function mouseoverbox1(){
    document.querySelectorAll("[id='a1']").forEach( function( ele ){
       ele.style.color = "green";
    });
}

Demo

function mouseoverbox1(){
    document.querySelectorAll("[id='a1']").forEach( function( ele ){
       ele.style.color = "green";
    });
}

<div onmouseover="mouseoverbox1()">
    <a id="a1">Color</a>
    <a id="a1">Names</a>
    <a id="a1">Places</a>
</div>

dfsq · Accepted Answer · 2018-01-03 09:11:44Z

0

Since you already have many JS solutions I will post the missing simplest (and probably most appropriate) solution for this problem: CSS.

div a:hover {
  color: green;
}

<div>
  <a id="a1">Color</a>
  <a id="a1">Names</a>
  <a id="a1">Places</a>
</div>

answered Jan 3, 2018 at 9:11

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

How to use javascript function for more than one tag with similar id?

5 Answers 5

Comments

3 Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

2 Comments

Comments

Comments

Linked

Related