Блог

Главная - Вопросы по программированию - JavaScript — Создание кнопки, вызывающей события по порядку

JavaScript — Создание кнопки, вызывающей события по порядку

#javascript

#javascript

Вопрос:

Я хочу добавить кнопку на страницу, чтобы каждый раз, когда пользователь нажимал на нее, другая функция запускалась по порядку (показывать и скрывать изображения).

Смотрите ниже сценарий, который я использую (у меня их больше 3, это пример). Я получаю сообщение об ошибке:

Ошибка неперехваченного типа: не удается прочитать свойство ‘addEventListener’ с нулевым значением в meeting_room1.html:5

 var x = document.getElementById("myBtn");
x.addEventListener("click", C1);
x.addEventListener("click", C2);
x.addEventListener("click", C3);

function C1(){
   var pic = "design/images/Ins1.png";
   document.getElementById('Ins1').style.display='block';
}

function C2(){  
    var pic = "design/images/Int1.png";
    document.getElementById('Ins1').style.display='none';   
    document.getElementById('Int1').style.display='block';
}               

function C3(){
    var pic = "design/images/Q1.png";
    document.getElementById('Int1').style.display='none';   
    document.getElementById('Q1').style.display='block';
}

Комментарии:

1. это потому, что элемент с идентификатором myBtn не был найден. Возможно, она не существует или JS был выполнен до загрузки страницы

Ответ №1:

 var myBtn = document.querySelector(".myBtn");
var myImg = document.querySelector(".myImg");

var image1 = "https://upload.wikimedia.org/wikipedia/en/a/a1/Free_HQ_in_Paris.jpg";
var image2 = "https://www.w3schools.com/html/pic_trulli.jpg";
var image3 = "https://www.w3schools.com/html/img_chania.jpg";

myBtn.addEventListener('click', ()=> {
  if(myImg.src == image1){
    myImg.src = image2;
  } else if(myImg.src == image2){
     myImg.src = image3;
  } else if(myImg.src == image3){
    myImg.src = image1;
  }
 });  
 #myDiv{
  width: 500px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-container {
  width: 450px;
  height: 350px;
  margin: 20px auto;
  border-radius: 4px;
}

.img-container .myImg {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.myBtn {
  font-size: 1rem;
  padding: 2px 8px;
  margin: 0 0 20px 0;
  cursor: pointer;
}  
 <div id="myDiv">
    <div class="img-container">
        <img src="https://upload.wikimedia.org/wikipedia/en/a/a1/Free_HQ_in_Paris.jpg" class="myImg">
    </div>
    <button class="myBtn">Change</button>
</div>

Комментарии:

1. Спасибо, Хакуна, это кажется лучшим вариантом! Но я все равно получаю ту же ошибку: ( — —

2. Объясните мне, пожалуйста, что function делает каждый. Чего вы пытаетесь достичь?