Change css of a DOM element that does not have an id using Javascript

Question

I have a <div> that is displayed and several <p> which are hidden inside that

<div class="em-booking-form-details">
<p class="ticket-price">
.........
.........
</div>

currently css is

.em-booking-form-details p{
    display:none;
}

i have a button register with id=register. when i click this button i want to be displayed all the <p> s . not that i cant use id for <p> and <div> and only use javascript.

But you can use jQuery for it or not? If so then $(document).on('click','#register',function() { $(".ticket-price").show() }); — marcineck
– marcineck, Commented May 10, 2014 at 6:38

ReGdYN · Accepted Answer · 2014-05-10 06:42:33Z

2

I provided a solution on jsFiddle http://jsfiddle.net/L5Xsg/

var dom_elements = document.querySelectorAll('.em-booking-form-details p');
var dom_length = dom_elements.length;

console.log(dom_elements);
for(var i = 0 ; i < dom_length ; i++) {
    dom_elements[i].style.display = 'block';
}

answered May 10, 2014 at 6:42

ReGdYN

5362 silver badges7 bronze badges

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

Comments

Totò · Accepted Answer · 2014-05-10 06:38:52Z

2

document.querySelectorAll('.em-booking-form-details p')

Will return a list of DOM nodes that match that CSS selector. You can iterate over that list and set the display property to block or whatever you need

answered May 10, 2014 at 6:38

Totò

1,85415 silver badges21 bronze badges

Comments

raton · Accepted Answer · 2014-05-10 07:30:11Z

1

    var div = document.getElementsByClassName("em-booking-form-details")
    var p = div[0].getElementsByTagName('p')
    for(var i=0;i<p.length;i++){
            p[i].style.display = "block";       
    }   





    var p = document.getElementsByClassName('ticket-price')
    var all = p[0].parentElement.children
    for(var i=0;i<all.length;i++){
            all[i].style.display = "block";     
    }

answered May 10, 2014 at 7:30

raton

4285 silver badges14 bronze badges

Collectives™ on Stack Overflow

Change css of a DOM element that does not have an id using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related