Apply javascript function to same ids

Question

I just want to ask let say if we have multiple divs with same id how can we display none them using javascript ?

I tried:

<script>
function filterfunc() { 
if(document.getElementById('filter_deductible').value == 'id_50'){

document.getElementById('id_0').style.display = 'none';

document.getElementById('id_50').style.display = 'block';
}
}
</script>

And here is my html divs with same ids:

<div id="id_0">0</div>
<div id="id_0">0</div>
<div id="id_50">50</div>

But its hidding only one div of id id_0 instead of all div having id_0

Any suggestions please

Apply class instead. You should have unique id's in your code! — Joakim M
– Joakim M, Commented Jan 13, 2015 at 11:12
IDs are suppose to be unique. Thats why they are called IDs. — Rahul Desai
– Rahul Desai, Commented Jan 13, 2015 at 11:13
@GuyT That doesn't make any sense. The javascript tag has much more questions and followers, and if you tag wrong you'll just get irrelevant answers. — JJJ
– JJJ, Commented Jan 13, 2015 at 11:29

Rohan Kumar · Accepted Answer · 2015-01-13 11:13:52Z

1

Id must be unique, you should use class like,

<div class="id_0">0</div>
<div class="id_0">0</div>
<div class="id_50">50</div>

And to hide all id_0 use

function filterfunc() { 
    if($('#filter_deductible').val() == 'id_50'){
       $('div.id_0').hide();
       $('div.id_50').show();
    }
}

answered Jan 13, 2015 at 11:13

Rohan Kumar

40.7k11 gold badges80 silver badges111 bronze badges

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

Comments

Sadikhasan · Accepted Answer · 2015-01-13 11:47:20Z

0

It simple using jQuery like

HTML

<select name="filter_deductible" id="filter_deductible">
    <option value="id_0">0</option>
    <option value="id_50">50</option>
</select>
<div id="id_0">0</div>
<div id="id_0">0</div>
<div id="id_50">50</div>

jQuery

$("#filter_deductible").change(function(){
  if($(this).val()=="id_50")
  {
    $('[id="id_0"]').hide();
  }
});

Demo

edited Jan 13, 2015 at 11:47

answered Jan 13, 2015 at 11:22

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

Comments

Naeem Shaikh · Accepted Answer · 2015-01-13 11:14:42Z

you should use a class in case there are multiple elements. Or use different ids.

Ids are meant to be unique.

<script>
function filterfunc() { 
if(document.getElementById('filter_deductible').value == 'id_50'){

$('.id_0').css("display","none")

$('.id_50').css("display","block")
}
}
</script>


<div class="id_0">0</div>
<div class="id_0">0</div>
<div class="id_50">50</div>

Or

 <script>
    function filterfunc() { 
    if(document.getElementById('filter_deductible').value == 'id_50'){

    $('.id_0').hide()

    $('.id_50').css("display","block")
    }
    }
    </script>


    <div class="id_0">0</div>
    <div class="id_0">0</div>
    <div class="id_50">50</div>

Andrei Nemes · Accepted Answer · 2015-01-13 11:16:04Z

0

Do not do this. Having multiple elements with the same ids leads to undefined behaviour. If you need to attach information to your dome nodes use data attributes or classes. Notice how getElementById is singular form? It only ever expects to select and return one element.

That being said, you can probably get away with

document.querySelectorAll("#id_0")

answered Jan 13, 2015 at 11:16

Andrei Nemes

3,1221 gold badge18 silver badges23 bronze badges

1 Comment

A. Wolff Over a year ago

No but document.querySelectorAll("[id=id_0]") would work even anyway this is just wrong to use duplicate IDs just as you mentioned it

pesoklp13 · Accepted Answer · 2015-01-13 11:18:39Z

if you want to use javascript functions on dom elements you have to use class not id attribute.

id attribute is unique in whole html document.

try to use jquery.

$.(document).ready(function(){
   $("#filter_deductible").change(function(){
       var $this = $(this); //instance of element where was changed value
       if($this.val() == 'id_50'){
           $(".id_0").hide();
           $(".id_50").show();
       }
   });
});

your document html should looks like.

<div class="id_0">0</div>
<div class="id_0">0</div>
<div class="id_50">50</div>

this will works only if you will include jquery library inside tags. And your dom element #filter_deductible allows change event trigger.

hope i helped you

nasserui · Accepted Answer · 2015-01-13 11:22:03Z

0

Use classes in this case ID is unique.

<div class="zero">0</div>
<div class="zero">0</div>
<div class="class_50">50</div>

you can use jQuery:

$('.zero').hide();
$('.class_50').show();

answered Jan 13, 2015 at 11:22

nasserui

864 bronze badges

Comments

John C · Accepted Answer · 2015-01-13 11:29:13Z

The HTML spec requires that the ID attribute to be unique in a page:

If you want to have several elements with the same ID your code will not work as the method getElementByID only ever returns one value and ID's need to be unique. If you have two ID's with the same value then your HTML is invalid.

What you would want to do is use div class="id_0" and use the method getElementsByClassName as this returns an Array of elements

function filterFunc() {
    var n = document.getElementsByClassName("id_0");
    var a = [];
    var i;
    while(n) {
        // Do whatever you want to do with the Element
        // This returns as many Elements that exist with this class name so `enter code here`you can set each value as       visible.
    }   

}

Collectives™ on Stack Overflow

Apply javascript function to same ids

7 Answers 7

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Related