Показ изображения кнопки

Question

Это мой html

Это мой js

function picture(){
      document.getElementById('picture1').src;
      document.getElementById('picture1').style.display='block';

      }
      function picture2(){
             document.getElementById('picture2').src;
             document.getElementById('picture2').style.display='block';

             }

             function picture3(){
                    document.getElementById('picture3').src;
                    document.getElementById('picture3').style.display='block';

                    }

Так как я могу сделать, если я нажму одну кнопку, чтобы изображение появилось, и когда я нажмите другую кнопку, чтобы изображение с первой кнопки исчезло, а изображение с текущей нажатой кнопки появилось?

Answer 1

Вы можете сделать это легко, используя только одну функцию, как показано ниже. Сначала вы можете скрыть изображение и показать его, нажав кнопку. Передайте значение через параметр функции и просто переключите значения в зависимости от кнопки, которая должна показывать соответствующую картинку.

function picture(num){
  document.getElementById('picture').style.display = 'block';
  switch(num) {
    case 1: document.getElementById('picture').src = "https://picsum.photos/id/237/150/150"; break;
    case 2: document.getElementById('picture').src = "https://picsum.photos/id/238/150/150"; break;
    case 3: document.getElementById('picture').src = "https://picsum.photos/id/239/150/150"; break;
    default: document.getElementById('picture').src = "https://picsum.photos/id/237/150/150"; break;
  }
	
}

Answer 2

function picture(){
      document.getElementById('picture1').src;
      document.getElementById('picture1').style.display='block';
      document.getElementById('picture2').style.display='none';
      document.getElementById('picture3').style.display='none';

      }
      function picture2(){
             document.getElementById('picture2').src;
             document.getElementById('picture2').style.display='block';
             document.getElementById('picture1').style.display='none';
             document.getElementById('picture3').style.display='none';

             }

             function picture3(){
                    document.getElementById('picture3').src;
                    document.getElementById('picture3').style.display='block';
                    document.getElementById('picture1').style.display='none';
                    document.getElementById('picture2').style.display='none';
                    };