Unhiding elements

JavaScript
#1

Whenever I try to unhide all the elements using the element queryselectorAll(), it says this

image

I don’t have anything undefined, and it still says that.

#2

I might not have grasped what you want to achieve here, but something like this?

let button = document.querySelector(".start");
let answers = document.querySelector(".answers");

button.addEventListener("click", test);

function test() {
    answers.classList.remove('hide')
    button.classList.add('hide')
}
1 Like
#3

Hi @Growly, querySelectorAll() doesn’t return a single element but a node list, which again doesn’t have a style property – the contained elements do. So you should either

  1. Use querySelector() like for the start button, which will only return the first found element; or
  2. Iterate over the found elements like so:
const hidden = document.querySelectorAll('.hide')

// Then inside some other function
hidden.forEach(element => {
  element.style.display = 'block'
})

I’d suggest to just remove hide from the class list though, rather than overriding the CSS rule with inline styles…

hidden.forEach(element => {
  element.classList.remove('hide')
})

(x-post)

2 Likes
#4

querySelectorAll returns a node list. You would need to loop over that list to operate on each element in the list.

function test() {
	hide.forEach(function(item) {
		item.style.display = 'block';
	});
	button.style.display = "none";
}
1 Like
#5

Greetings fellow human from SitePoint, I’m having problems as always, tee hee.

I have done it this way

In which I grab all of the classes to which I assigned different names and put them into separate variables, not into one. Obviously this is a terrible idea as the syntax is too much! haha!

Haha! I have not thought of that. I forgot that existed!

I will do what you said.

1 Like