Access of multiple ID`s and hiding them (in CSS)

Question

Ok so I have a strange problem.
I need to hide (with a button) multiple elements on site (and later turn them visible).
Now I`ve tried few different approaches.
1. Adding common CLASS to elements, then in JS function I access them by document.getElementsByClassName(); -Didn`t worked though.
2. Because elements are of the same type (tag), i`ve tried
getElementsByTagName(); - Also recieved error.
3. By using document.querySelectorAll(); list of ID`s... - Didn`t worked also.
4. By creating an array of ID`s (var a = [document.getElementById()...];

None if this actually worked. I am constantly recieving error "JavaScript Console
TypeError: dis.style is undefined"

My piece of code:
function clockOn() {

var dis = [
document.getElementById("ora"),
document.getElementById("minu"),
document.getElementById("seco"),
document.getElementById("merry"),
document.getElementById("wDay"),
document.getElementById("calDay"),
document.getElementById("year")
];
if (dis.style.visibility === 'hidden') {
dis.style.visibility = 'visible';
} else {
dis.style.visibility = 'hidden';
}
}

I know it would be easier to use JQ but this is not the point.
Maybe I am missing something? I am really confused at this moment.

Thanks for help.

Everything is here.
https://code.sololearn.com/WoRys0ur8xfq/#html

Answer 1

You need to loop your array

for(var a = 0; a < dis.length; a++) {
if (dis[a].style.visibility === 'hidden') {
dis[a].style.visibility = 'visible';
} else {
dis[a].style.visibility = 'hidden';
}
}

Answer 2

Brilliant... Yes it works! (it lives!) " thank you so much!