объединить 4 функции js

#javascript #функции #hide

Как правильно сделать из этих 4-х функций одну?

А также необходимо заставить их работать при нажатии кнопки(теги button и input)
в html с помощью атрибута "onclick=function()". Не могу понять как их правильно связать.

function showHideVysotskiy() {
    var hideShow = document.getElementById('vysotskiy');
    if (hideShow.style.display === "none"){
        hideShow.style.display = "inline";
    }else{
        hideShow.style.display = "none";
    }
};
function showHideDdt() {
    var hideShow = document.getElementById('ddt');
    if (hideShow.style.display === "none"){
        hideShow.style.display = "inline";
    }else{
        hideShow.style.display = "none";
    }
};
function showHideKeno() {
    var hideShow = document.getElementById('keno');
    if (hideShow.style.display === "none"){
        hideShow.style.display = "inline";
    }else{
        hideShow.style.display = "none";
    }
};
function showHideCinemaSongs() {
    var hideShow = document.getElementById('cinemaSongs');
    if (hideShow.style.display === "none"){
        hideShow.style.display = "inline";
    }else{
        hideShow.style.display = "none";
    }
};        


Я пробовал самостоятельно как-то так, но не понимаю как обозначить номер переменной
i при исполнении "onclick="function()"" :

var x = {
    vysotskiy: document.getElementById('vysotskiy'), 
    ddt: document.getElementById('ddt'), 
    keno: document.getElementById('keno'), 
    cinemaSongs: document.getElementById('cinemaSongs')
};
var i = x.length;
function showHide() {
    if (x[i].style.display === "none"){
        x[i].style.display = "inline";
    }else{
        x[i].style.display = "none";
    }
};

    

Ответы

Ответ 1

Так как функции отличаются только элементом, id его можно передать через параметр

function showHide(hideShowId) {
    var hideShow = document.getElementById(hideShowId)
    if (hideShow.style.display === "none"){
        hideShow.style.display = "inline";
    }else{
        hideShow.style.display = "none";
    }
}; 


и вызывать потом

onclick='showHide("ddt")'


Ответ 2

function showHide() {
    ['vysotskiy', 'ddt', 'keno', 'cinemaSongs'].forEach(function(id){
        var element = document.getElementById(id);
        if (element.style.display === "none"){
            element.style.display = "inline";
        }else{
            element.style.display = "none";
        }
    });
};


Ответ 3

Если я правильно понял задачу, то это можно сделать, например, так:

function showHide(id) {
    var elem = document.getElementById(id);
    if (elem != null)
        elem.style.display = (elem.style.display === "none") ? "inline" : "none";
}
var ids = ['vysotskiy', 'ddt', 'keno', 'cinemaSongs'];
for (var i = 0; i < ids.length; ++i)
    showHide(ids[i]);


Если можно использовать ECMAScript 5, то цикл можно заменить методом forEach:

ids.forEach(showHide)