Get elements by class name in a certain div through Javascript

Question

I have:

<div class="f0">
    <div class="input-text">
        <t>Text</t>
    </div>
</div>

var h = 0;
    for(h;h<inputstext.length;h++){
        var str = 'f' + h;
        var currentDiv = document.getElementById(str);


    }

How do I get only the input-text elements value that is in f0?

Output should be Text.

Thanks.

Duplicate of [Finding child element of parent pure javascript](https://stackoverflow.com/questions/16302045/finding-child-element-of-parent-pure-javascript) — Guy Incognito, Jun 13 '20 at 21:55
@GuyIncognito He's wanting to grab classes that match `f*`, not just iterate over children. — Lewis, Jun 13 '20 at 21:59
That's what the code already does. "How do I get only the input-text elements value that is in f0?" — Guy Incognito, Jun 13 '20 at 22:00
@GuyIncognito I have multiple: f0, f1, f2, f3, f4 etc. But i only want the `input-group` data from `f0`. — Arr, Jun 13 '20 at 22:22
Yes, I understand what you want. The duplicate shows how to do it. — Guy Incognito, Jun 14 '20 at 06:24

Lewis · Accepted Answer · 2020-06-13T22:00:22.783

You can use the element[property*="val"] to select all elements with property beginning with "val" - in this case, any class that starts with "f", and then select their .input-text children.

Also, you're trying to get elements with id f0, when these divs are marked with class f0.

const inputs = document.querySelectorAll('[class*="f"] .input-text');
for (const element of inputs)
  console.log(element.textContent.trim());

<div class="f0">
    <div class="input-text">
        inside f0
    </div>
</div>
<div class="f1">
    <div class="input-text">
        inside f1
    </div>
</div>

Get elements by class name in a certain div through Javascript

1 Answers1