Скрыть и показать слои

[spoon100500]

Есть три слоя Layer1, Layer2, Layer3 нужно так при нажатии button1 слой Layer1 показывается, а слои Layer2, Layer3 скрыты; при нажатии button2 слой Layer2 показывается, а слои Layer1, Layer3 скрыты; при нажатии button3 слой Layer3 показывается, а слои Layer1, Layer2 скрыты; При загрузке страницы должен быть виден слой Layer1.

button1.addEventListener("click", layer1);//скрываем и показываем слой Layer1
button2.addEventListener("click", layer2);//скрываем и показываем слой Layer2
button3.addEventListener("click", layer3);//скрываем и показываем слой Layer3
 
//Функция скрывает и показывает слой Layer1-------------------------------------------
 
function layer1() {
with (document.getElementById('Layer1').style)
    {
       if (display == "none")
           display = "block";
       else
           display = "none";
    }
};
//Функция скрывает и показывает слой Layer2-------------------------------------------
 
function layer2() {
with (document.getElementById('Layer2').style)
    {
       if (display == "none")
           display = "block";
       else
           display = "none";
    }
};
//Функция скрывает и показывает слой Layer3-------------------------------------------
 
function layer3() {
with (document.getElementById('Layer3').style)
    {
       if (display == "none")
           display = "block";
       else
           display = "none";
    }
};

[Alex11223]

Так а вопрос-то в чем? Делайте это, а не только переключайте видимость одного элемента.

Я бы начал с создания функции типа

function setLayerVisibility(layer, isVisible)

чтобы не копипастить кучу кода.

[spoon100500]

Можно чуть чуть по подробнее

[Alex11223]

Что подробнее?

function изменитьВидимостьСлоя(слой, сделатьВидимым?)

[spoon100500]

Сообщение от Alex11223

Что подробнее?

function изменитьВидимостьСлоя(слой, сделатьВидимым?)

С параметрами плохо у меня пока))

[Alex11223]

https://learn.javascript.ru/function-basics#параметры

[spoon100500]

Кнопки оставляем?
button1.addEventListener("click", layer1);//скрываем и показываем слой Layer1
button2.addEventListener("click", layer2);//скрываем и показываем слой Layer2
button3.addEventListener("click", layer3);//скрываем и показываем слой Layer3

[spoon100500]

Почему такой вариант не работает?

function layer3() {
layerStyl3 = document.getElementById('Layer3').style;
    if (layerStyl3.style.display == "none") {
            layerStyl3.style.display = "block";
        } else {
            layerStyl3.style.display = "none";
    }
	
};

Такой работает

function layer3() {
with (document.getElementById('Layer3').style)
    {
       if (display == "none")
           display = "block";
       else
           display = "none";
    }
};

[Serge_Bliznykov]

так Вы же style два раза берёте. сначала в переменную, а потом ещё и условии.
попробуйте так:

function layer3() {
var layerStyl3 = document.getElementById('Layer3');
    if (layerStyl3.style.display == "none") {
            layerStyl3.style.display = "block";
        } else {
            layerStyl3.style.display = "none";
    }
	
};

[Alex11223]

А еще можно узнать о https://learn.javascript.ru/ifelse#%...BD%D0%B0%D0%BA и сокращать подобный код до 1 строки вместо 4.