Question

93

Javascript select nested class element

rated 0 times [ 100] [ 7] / answers: 1 / hits: 66796 / 10 Years ago, mon, august 25, 2014, 12:00:00

I'm working on changing some elements the slider on my website

my slider code looks like this:

<div class=cl1>

    <h1>Some heading</h1>

    <div class=sl_descr>Some description</div>

    <div class=sl_price>from only €00.00<br></div>

</div>



<div class=cl2>

    <h1>Some other heading</h1>

    <div class=sl_descr>Some other description</div>

    <div class=sl_price>from only €00.00<br></div>

</div>



<div class=cl3>

    <h1>yet some heading</h1>

    <div class=sl_descr>yet Some description</div>

    <div class=sl_price>from only €00.00<br></div>

</div>

I would like to change price when the currency changes. To do that I would like to use javascript with getElementsByClassName and then innerHTML. However my javascript doesn't work as wanted. Here it is

document.getElementsByClassName('cl1 sl_price').innerHTML=from only £00.00<br>;

any suggestions to how could I separately address sl_price class for every cl element? Cheers

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

koltenb

Add To Favorites

Follow

Total Points: 276

Total Questions: 92

Total Answers: 101

Location: North Korea

Member since Fri, Nov 4, 2022

2 Years ago

answered 10 Years ago dequant · Accepted Answer

getElementsByClassName returns a collection (list) of elements
(will therefore not have a innerHTML property)

You could try document.querySelector(.cl1 .sl_price) instead (takes a css selector and returns the first match)

read more at https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelector

The end result would then be something like this;

document.querySelector('.cl1 .sl_price').innerHTML = from only £00.00<br>;

Note: I am assuming you only wanted to match a single element. If not, you should look at @Bommox's answer and querySelectorAll.