CODEWITHSUNDEEP
javascripthtml
JoJo
JoJo

Reputation: 1473

Apply javascript function to same ids

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

Upvotes: 0

Views: 1084

Answers (7)

Sadikhasan
Sadikhasan

Reputation: 18600

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

Upvotes: 0

John C
John C

Reputation: 1

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

}

Upvotes: 0

nasserui
nasserui

Reputation: 86

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();

Upvotes: 0

pesoklp13
pesoklp13

Reputation: 349

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

Upvotes: 0

Andrei Nemes
Andrei Nemes

Reputation: 3122

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")

Upvotes: 0

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

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>

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

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();
    }
}

Upvotes: 1

Related Questions