Javascript selects a nested class element

Question

I am working on changing some of the slider elements on my website.

my slider code is as follows:

<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 want to change the price when the currency changes. For this, I would like to use javascript with getElementsByClassName and then innerHTML. However, my javascript does not work the way you wanted. Here

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

Any suggestions on how I can separately specify the class "sl_price" for each element "cl"? Greetings

Answer 1

There are two things in your current attempt:

• You can only pass one class name getElementsByClassName
• getElementsByClassName returns a collection (list) of elements (therefore, it will not have an innerHTML property)

Instead, you can try document.querySelector(".cl1 .sl_price") (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 will be the following:

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

---

Note. I assume that you only want to combine one element. If not, you should see @Bommox and querySelectorAll .

Answer 2

 document.querySelectorAll('.cl1 .sl_price'); 

This will select all nested sl_price elements inside cl1. If you want to change more cl (i.e. Cl1, cl2, cl3), just add a common class to all of them, for example cl.

Answer 3

You should do this (if not using jQuery):

I used “for” because I am not so if it could be more than one cl1 or sl_price in them.

 var nodes = document.getElementsByClassName("cl1"); for(var i = 0; i < nodes.length; i++) { var node = nodes[i].getElementsByClassName("sl_price"); for(var j = 0; j < node.length; i++) { node.innerHTML="from only £00.00<br>"; } } 

Answer 4

Edit: this is incorrect because it does not take into account that two class names are specified.

I would suggest using jQuery for something like this, which will make it easier when you try to do something more complex. However, the actual problem is that getElementsByClassName returns an HTMLCollection elements, and setting innerHTML on it does not set it on its elements. The following code should work:

 var elements = document.getElementsByClassName('cl1 sl_price'); for (var i = 0; i < elements.length; i++) { elements[i].innerHTML = "from only £00.00<br>"; } 

Answer 5

If you use jQuery, the code is shorter than in native Javascript.

 $('.cl1 .sl_price').html("from only £00.00<br>"); 

Here is the fiddle:

http://jsfiddle.net/4zLbmrLq/

Answer 6

I believe you need to do something like this:

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

The way you do it now will get elements that have both the cl1 and sl_price classes. If you are linking your methods, you will talk about it to look for elements with cl1 as a class inside the document object, return an object with this subset, and then look inside this subset for elements with the sl_price class. Then you need to specify the index, because document.getElementsByClassName will return an array of elements matching your requirements. This array will not have the array.innerHTML property, but the objects contained in its indexes will.