Console log not printing HTML element

Question

I selected objects by class name

var inp = document.getElementsByClassName("tagsinput field is-grouped is-grouped-multiline input");

but in my file, there is only one element with that class, so I tried to console.log it

console.log(inp);

and it returned:

HTMLCollection []
length: 1
0: div.tagsinput.field.is-grouped.is-grouped-multiline.input
__proto__: HTMLCollection

then I tried to access it:

console.log(inp[0]);

but it returned:

undefined

I tried to run it in chrome devTools console and it worked just fine

Here is example code:

<script>
    var inp = document.getElementsByClassName("tagsinput field is-grouped is-grouped-multiline input");
    console.log(inp);
</script>

<script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bulma-tagsinput.min.js">
    </script>
<script>
    bulmaTagsinput.attach();
</script>

Could you upload the HTML Element that you're trying to select? — Shiny
– Shiny, Commented Jan 2, 2020 at 23:26
Parse has a very specific definition for computing that doesn't apply here. You aren't parsing anything. — Jared Smith
– Jared Smith, Commented Jan 2, 2020 at 23:26
Probably this issue, but without more info, we can't say for sure (nor give a solution to the problem). — Ivar
– Ivar, Commented Jan 2, 2020 at 23:39

Steven Moseley · Accepted Answer · 2020-01-03 00:10:35Z

2

Looking at your added code example, it looks like the problem is a race condition. You're attempting to access the element before it's added to the DOM.

Adding a window.load event listener should fix the problem:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bulma-tagsinput.min.js"></script>
<script>
    window.addEventListener('load', (event) => {
        bulmaTagsinput.attach();
        var inp = document.getElementsByClassName("tagsinput field is-grouped is-grouped-multiline input");
        console.log(inp);
    });
</script>

edited Jan 3, 2020 at 0:10

answered Jan 2, 2020 at 23:27

Steven Moseley

16.4k4 gold badges43 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ivar Over a year ago

That applies if you use that code directly in the console, but OP mentioned that it works fine from the DevTools console.

Steven Moseley Over a year ago

@Ivar the code example hadn't been posted before, which is why I assumed OP was confusing the output with the printed value.

Jakov Gl. · Accepted Answer · 2020-01-03 00:08:56Z

-1

Here is the solution:

setTimeout(function () {
    console.log(inp[0]);
}, 1000);

Problem was that I was trying to parse an object that didn't exist.

answered Jan 3, 2020 at 0:08

Jakov Gl.

3964 silver badges12 bronze badges

Collectives™ on Stack Overflow

Console log not printing HTML element

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related