Trying to change id for multiple rows

Question

I'm trying to change the id for multiple lines in order to activate and deactivate the link, but It only works with first line. Is there a way to make it work on entire page?

I want to change all paragraphs at the same time

function changediv() {
    if (document.getElementById("enabled")) {
        document.getElementById("enabled").id = "disabled";
    } else {          
        document.getElementById("disabled").id = "enabled";
    }
}

<button type="button" onclick="changediv()">Display</button> <br><br>
<a href="http://www.google.com" id="disabled">This is a paragraph.</a><br>
<a href="http://www.google.com" id="disabled">This is a paragraph.</a><br>
<a href="http://www.google.com" id="disabled">This is a paragraph.</a>

Answer 1

document.getElementById always returns you the first element with that id .

So, you should use a different selector if you want to select multiple elements, preferably with a class.

try this document.getElementsByClassName instead

function changediv() {
    if (document.getElementsByClassName("enabled")) {
        document.getElementsByClassName("enabled").className = "disabled";
    } else {          
        document.getElementsByClassName("disabled").className = "enabled";
    }
}

<button type="button" onclick="changediv()">Display</button> <br><br>
<a href="http://www.google.com" class="disabled">This is a paragraph.</a><br>
<a href="http://www.google.com" class="disabled">This is a paragraph.</a><br>
<a href="http://www.google.com" class="disabled">This is a paragraph.</a>

Answer 2

As already said, ID attribute of an element must be unique in a document

The id should be unique throughout the scope of the current document

Now, the solution is to use a class to group similar element, and access all the target elements using that class, you can use getElementsByClassName() or querySelectorAll() for that as given below. I have used querySelectorAll() since it returns a non- live NodeList

 function changediv() { var els = document.querySelectorAll('.disabled, .enabled'); for (var i = 0; i < els.length; i++) { els[i].classList.toggle('enabled'); els[i].classList.toggle('disabled'); } } 

 .disabled { border: 1px solid red; padding: 5px; display: inline-block; margin-bottom: 5px; } .enabled { border: 1px solid green; padding: 5px; display: inline-block; margin-bottom: 5px; } 

 <button type="button" onclick="changediv()">Display</button> <br><br> <a href="http://www.google.com" class="disabled">This is a paragraph.</a><br> <a href="http://www.google.com" class="disabled">This is a paragraph.</a><br> <a href="http://www.google.com" class="disabled">This is a paragraph.</a> 

Answer 3

You have to set the enables and disabled as classes, instead of ids and than use something like this:

var enabledunits = getElementsByClassName("enabled");
for(var i = 0; i < enabledunits.length; i++)
{
   enabledunits.item(i).class = "disabled";
}

but be careful, because if you put both for loops behind each other, the second for loop will remove the effect of the first.

Answer 4

Maybe you have to use the class attribute instead of the id attribute. Class names can be used multiple times while ids are unique.