Code Playground Issue.

Question

why this code not working on Sololearn codeplayground?
// suppose we have two 'h1' tags with content of 'hello' in html
var test = document.getElementsByTagName('h1');
console.log(Array.from(test).forEach(item => {
console.log(item); // null
return item.value; // output undefined
}))
// and
var test = document.querySelectorAll('h1')
console.log(test.forEach(item => {
return item.value; // output undefined
}))
// why null? does the codeplayground do not support these futures? thanks.

Answer 1

Did you wait for the body to load? Otherwise, the list is empty.

Answer 2

I don’t remember much about JS, but one problem is that getElementsByTagName does not get the class or id, it gets the tag name. That is html, head, p, body, any of those.

Answer 3

@jayden it's not. console.log() is valid

Answer 4

opss i means h1 over there

Answer 5

@john yes already sir.
document.addEventListener('DOMContentLoaded', () => {
console.log('ready') // output 'ready'
test = document.getElementsByTagName('h1')
console.log(test) // output [object HTMLCollection]
console.log(Array.from(test).forEach(item => {
return item.value; // output undefined
}))
})

Answer 6

Nevermind guys, i think i just solved the issue. trying to consoling the results for changing the element content does not actually get consoled, because i do not return anything to the console that trying to output. I'm so lol 😂
document.addEventListener('DOMContentLoaded', () => {
console.log('ready')
test = document.getElementsByTagName('h1')
console.log(test) // output [object HTMLCollection]
console.log(Array.from(test).forEach(item => {
item.innerHTML = 'NEW'; // change the content to "NEW"
}))
})