Javascript: getelementsbyid inside of class that is changing (active)

Question

This is my HTML code:

<div class="foo active">
    <div id="bar">
        Hello world!
    </div>
</div>

Hello world!

The div class active is always changing so i first need to get into the class foo active

How can I get to change "Hello world!"?

var targetDiv = document.getElementByClassName("foo active")[0].getElementsById("bar");

is not working.

I know when the code is like this:

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

I just need to:

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

Elements are required to be unique within a document, so `document.getElementById("bar")` would do. — Ivar, Dec 29 '21 at 09:12
Try `getElementById` instead of `getElementsById` . There is only meant to be one element for an ID. — Flimm, Dec 29 '21 at 09:12
Throw the `getElementsBy*` methods to trashes ([why](https://stackoverflow.com/a/66480319/1169519)). Since ids must be unique within the document, you can just pick the element with `querySelector('#bar');`. — Teemu, Dec 29 '21 at 09:13
The div class active is always changing, so I first need to get into the `class="foo active"` — Cepturion, Dec 29 '21 at 09:18
Changing the parent's class name doesn't have an effect to the id of a child. — Teemu, Dec 29 '21 at 09:18
@Cepturion That still doesn't change that `id`'s are required to be unique. So regardless of how many `foo` elements you have, you can only have one that has an `id` `bar`, otherwise the HTML is invalid. — Ivar, Dec 29 '21 at 09:19
but i always need to get the ID, of the class that currently is active @Ivar — Cepturion, Dec 29 '21 at 09:21
The element having the class `active` doesn't have an id. Please explain your problem with more details in the question itself. — Teemu, Dec 29 '21 at 09:22

score 0 · Answer 1 · answered Dec 29 '21 at 09:14

0

You just need to target the ID of "bar".

document.getElementById("bar").innerHTML = "new text";

answered Dec 29 '21 at 09:14

Dean O'Brien

335
2
11

The div class active is always changing, so I first need to get into the `class="foo active"` – Cepturion Dec 29 '21 at 09:17
Ah ok, you never mentioned that in original post. The ID element of a div should be unique within the document. I suspect you might need to switch that over to a class. – Dean O'Brien Dec 29 '21 at 09:21

score 0 · Answer 2 · answered Dec 29 '21 at 09:19

If you want to access an element with an id in HTML, you do not have to use:

var targetDiv = document.getElementByClassName("foo")[0].getElementsById("bar");

You can simply do this:

var targetDiv = document.getElementsById("bar");

Also, You need something to run the code. Example if you click a button the text changes or if you want the text to change as soon as the DOM content loads you can add the DOMContentLoaded event listener.

Try this code:

<div class="foo">
<div id="bar">
    Hello world!
</div>
<button onClick = "changeText()">Change Text!</button>

changeText = () => {
 const targetVar = document.getElementById("bar");
 targetVar.innerHTML = "Something else!";
}

score 0 · Answer 3 · answered Dec 29 '21 at 09:33

To provide some context as to why this is happening, getElementById and getElementsByClassName return an Element and an array of Elements respectively. The Element object has a series of functions available to call, including (but not limited to) getElementsByClassName. However, the getElementById function is not available on Elements, only on the Document object itself, meaning that you can't call it in the way you were attempting to in your first example.

To circumvent this, you can either find the element by ID straight away and work from there

var targetDiv = document.getElementById("foo")

or you can use querySelector and querySelectorAll

const targetDiv = document.querySelector(".foo.active #bar")

// The result you want
const targetDiv = document.querySelector(".foo.active #bar")
console.log(targetDiv)

// An example of a result not filtered by the active class
const exampleDiv = document.querySelectorAll(".foo #bar")
console.log(exampleDiv)

<div class="foo active">
    <div id="bar">
        Hello world!
    </div>
</div>

<div class="foo inactive">
    <div id="bar">
        Hello world!
    </div>
</div>

Note that ideally there is only one element with a given ID on a page as IDs are intended to be unique. With that being said, my example isn't best practice, but it sounds like in your example there may be multiple elements with the same ID.

Javascript: getelementsbyid inside of class that is changing (active)

3 Answers3