How to get text written into html tag based on some class and id?

Question

I am trying to create an HTML page in which it should print item names (which is inside the div container) on the click of a button into a paragraph below and the condition is - it should only print those items which are having class name as "active" and parent id as "selected".

I tried doing this, here is my code -

function myFunction() {
    var selectedEl = document.querySelector(".selected");
    var items = selectedE1.getElementsByClassName('active');
    
    document.getElementById('listItems').innerHTML = items;
}

<div id="parent">
    <div id="example1 selected">
        <div class="item1"> ex1 item1 </div>
        <div class="item2 active"> ex1 item2 </div>
        <div class="item3"> ex1 item3 </div>
    </div>
    <br>
    <div id="example2">
        <div class="item1"> ex2 item1 </div>
        <div class="item2 active"> ex2 item2 </div>
        <div class="item3 active"> ex2 item3 </div>
    </div>
    <br>
    <div id="example3 selected">
        <div class="item1 active"> ex3 item1 </div>
        <div class="item2"> ex3 item2 </div>
        <div class="item3"> ex3 item3 </div>
    </div>
    <br>
    <div id="example4 selected">
        <div class="item1"> ex4 item1 </div>
        <div class="item2"> ex4 item2 </div>
        <div class="item3"> ex4 item3 </div>
    </div>
</div>

<br> <button onclick="myFunction()">Get Items</button>
<br><br>
<strong>Item List:<br></strong>
<p id="listItems"></p>

For the above code, the expected output should be -
Item List:
ex1 item2
ex3 item1

Note: You can use JavaScript and JQuery

Please help me doing this. Thanks in Advance!

Answer 1

The id selector value is not valid (id's value must not contain whitespace and must be unique in the whole document). Using class attribute you can try the following way:

function myFunction() {
    var items = document.querySelectorAll(".selected  > .active");
    var res="";
    //items.forEach(i => res += i.textContent + '<br/>'); // if you want to show in document
    items.forEach(i => res += i.textContent + '\n'); // if you want to show in alert
    //document.getElementById('listItems').innerHTML = res;
    alert(res)
}

<div id="parent">
    <div class="example1 selected">
        <div class="item1"> ex1 item1 </div>
        <div class="item2 active"> ex1 item2 </div>
        <div class="item3"> ex1 item3 </div>
    </div>
    <br>
    <div class="example2">
        <div class="item1"> ex2 item1 </div>
        <div class="item2 active"> ex2 item2 </div>
        <div class="item3 active"> ex2 item3 </div>
    </div>
    <br>
    <div class="example3 selected">
        <div class="item1 active"> ex3 item1 </div>
        <div class="item2"> ex3 item2 </div>
        <div class="item3"> ex3 item3 </div>
    </div>
    <br>
    <div class="example4 selected">
        <div class="item1"> ex4 item1 </div>
        <div class="item2"> ex4 item2 </div>
        <div class="item3"> ex4 item3 </div>
    </div>
</div>

<br> <button onclick="myFunction()">Get Items</button>
<br><br>
<strong>Item List:<br></strong>
<p id="listItems"></p>

Answer 2

You need to iterate based on the class

Eg :

$('.selected .active').each(function(i, obj) {
    console.log($(this).html());
});