When it comes to query selector, it is different from a jQuery selector. In jQuery, you can select multiple elements like this:
$('#goofy_1,#goofy_2,#goofy_3,#goofy_4')// it will get you all div selected
However, query selector returns a nodeList. This means you are actually getting
Try to log your querySelectorAll
console.log( querySelectorAll('#goofy_1,#goofy_2,#goofy_3,#goofy_4'));
you will get something like
For example, I am selecting a
https://i.sstatic.net/J7s66.png
As you can see, there isn't a single element selected, so you cannot make direct changes.
Therefore, you need to loop through all the elements as Arun P Johny suggests
var allElements = document.querySelectorAll('#goofy_1,#goofy_2,#goofy_3,#goofy_4');
for (var i = 0; i < els.length; i++) {
allElements [i].style.display = 'none';
}
For more information, check out this link:
Difference between HTMLCollection, NodeLists, and arrays of objects