Есть много способов достичь этого.В приведенном ниже решении используется onclick в сочетании с data-*, чтобы указать, какое изображение кнопка должна показать или скрыть.Кроме того, для видимости требуется, чтобы класс CSS «видимый» отображался (старайтесь избегать стилизации непосредственно для атрибута style).
Когда изображение должно отображаться, существующее видимое изображение должно быть невидимым.Вы можете либо сохранить, какой из них показан, и удалить только класс из этого элемента - или, как я это сделал, удалив его из всех изображений.
Чтобы получить кнопку, которую мы нажали, this передаетсяфункция в onclick=myclick(this).Это означает, что мы можем получить доступ к атрибутам нажатых кнопок, в частности к data-href="dog".К этому обращаются как element.dataset.href.
var dog = document.getElementById("dog");
var cat = document.getElementById("cat");
function myclick(element) {
dog.classList.remove("visible");
cat.classList.remove("visible");
document.getElementById(element.dataset.href).classList.add("visible");
}
.myimage {
display: none;
}
.visible {
display: block;
}
<!doctype html>
<html>
<head>
<title> Just Two Buttons </title>
</head>
<body>
<h1><center> Pick a button! </center></h1>
<img class="myimage" id="dog" src="https://i.ibb.co/x24nhsc/dog-image.jpg">
<img class="myimage visible" id="cat" src="https://i.ibb.co/CsGsxJ5/cat-217679.jpg">
<button onclick="myclick(this)" data-href="dog"> Woof! </button>
<button onclick="myclick(this)" data-href="cat"> Meow! </button>
</body>
</html>