Задача - пять кнопок в ряд, при нажатии на каждую внизу по центру появляется своя картинка. Соответственно предыдущие картинки скрываются. Каждой кнопке соответствует своя картинка. Вот код:
<script>
function vars() {
let one=document.getElementById(imgOne);
let two=document.getElementById(imgTwo);
let three=document.getElementById(imgThree);
let four=document.getElementById(imgFour);
let five=document.getElementById(imgFive);
}
function show_hide1() {
doc=document.getElementById(imgOne);
if(doc.style.display == "none") doc.style.display = "block";
five.style.display = "none";
two.style.display = "none";
three.style.display = "none";
four.style.display = "none";
else doc.style.display = "none";
five.style.display = "none";
two.style.display = "none";
three.style.display = "none";
four.style.display = "none";
}
function show_hide2() {
doc=document.getElementById(imgTwo);
if(doc.style.display == "none") doc.style.display = "block";
five.style.display = "none";
one.style.display = "none";
three.style.display = "none";
four.style.display = "none";
else doc.style.display = "none";
five.style.display = "none";
one.style.display = "none";
three.style.display = "none";
four.style.display = "none";
}
....
кнопки
<div class="container">
<input type="button" value="Поз" style="float: right" class="button" onclick="show_hide1();">
<input type="button" value="драв" style="float: right" class="button" onclick="show_hide2();">
... картинки
<img src="unnamed.png" style="float: right; display: none" id="imgOne">
<img src="img/firework.gif" style="float: right; display: none" id="imgTwo">
Не работает. Подскажите пожалуйста в чем ошибка?