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/bulma-tagsinput@2.0.0/dist/js/bulma-tagsinput.min.js">
    </script>
<script>
    bulmaTagsinput.attach();
</script>

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

Steven Moseley · Accepted Answer · 2020-01-03T00:10:35.873

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/bulma-tagsinput@2.0.0/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 03 '20 at 00:10

answered Jan 02 '20 at 23:27

Steven Moseley

15,871
4
39
50

1

That applies if you use that code directly in the console, but OP mentioned that it works fine from the DevTools console. – Ivar Jan 02 '20 at 23:41
1

@Ivar the code example hadn't been posted before, which is why I assumed OP was confusing the output with the printed value. – Steven Moseley Jan 03 '20 at 00:11

score -1 · Answer 2 · answered Jan 03 '20 at 00:08

-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 03 '20 at 00:08

Jakov Gl.

361
3
11

Console log not printing HTML element

2 Answers2