javascript/htmlDOM display element while hiding the others

Question

So I have written this clickDisplay function that displays certain elements on click, it works fine, yes, but obviously I needed a feature that would hide all the other elements, because they are supposed to be displayed in the same field, so right now they kind stack on top of eachother this is what I came up with, but it sorta doesn't work and I don't know why

const pages = ['watch','chars','seasons','songs']

    function clickHide(element){
        document.getElementById(element).style.display = 'none';
    }

    function clickDisplay(element){
        document.getElementById(element).style.display = 'block';
        for(let x = 0 ; x < pages.length ; x++){
            if (pages[x]!=element){clickHide(pages[x]);}
        }
    }

Answer 1

While it sounds like you solved your own problem, I started putting together code before you posted, so I'll throw it up here for you. :)

const pages = ['watch', 'chars', 'seasons', 'songs']

function clickHide (el) {
  pages.forEach((pel) => {
    setElement(pel, pel === el ? 'none' : 'block')
  })
}

function setElement(el, attr) {
  document.getElementById(el).style.display = attr
}

with the html having this:

onclick="clickHide('watch')"  // or 'chars' 'seasons' or 'songs'