Функция не работает при вызове с addEventListener или onclick, не отображает никаких сообщений об ошибках - PullRequest
0 голосов
/ 29 апреля 2019

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

Я пробовал оба метода addEventListener и onclick, но ни один из них не работает.


<img id="avatar" src="dog1.jpg" alt="avatar">
<button id="button">change dog</button>


    function changeDog() {
      var dog = document.getElementById('avatar').scr;
      if (dog == "dog1.jpg" ) {
        document.getElementById('avatar').scr = "dog2.jpg";
      }
      else {
        document.getElementById('avatar').src = "dog1.jpg";
      }
    }

    var button = document.getElementById('button');
    button.addEventListener=('click', changeDog);

Я ожидаю, что при нажатии на кнопку изображение с id = 'avatar' изменит источник с "dog1.jpg" на "dog2.jpg" и наоборот, но абсолютно ничего не происходит. Сообщение об ошибке не отображается. Я подозреваю, что это может быть глупой ошибкой, потому что я неопытный, но я поражен этим. Спасибо всем за любую помощь.

Ответы [ 4 ]

2 голосов
/ 29 апреля 2019

У вас есть несколько опечаток в вашем коде. Смотри ниже

function changeDog() {
  var dog = document.getElementById('avatar');
  
  if (dog.src === "dog1.jpg" ) {
    dog.src = "dog2.jpg";
  }
  else {
    dog.src = "dog1.jpg";
  }
}

 var button = document.getElementById('button');
 button.addEventListener('click', changeDog);
<img id="avatar" src="dog1.jpg" alt="avatar">
<button id="button">change dog</button>

Также вам следует прочитать о сравнении (используя === вместо ==): https://www.w3schools.com/js/js_comparisons.asp

0 голосов
/ 29 апреля 2019

В вашем коде несколько ошибок.Например, вы написали src в некоторых местах и ​​scr в других.Кроме того, вы повторяете часть кода снова и снова.

// Array with all dogs. Makes it easier to add more dogs.
const dogs = [ "dog1.jpg", "dog2.jpg" ];

function changeDog() {
  // Get the avatar element
  const avatar = document.getElementById('avatar');

  // Get current name. Note that the broswer probably have added
  // the full url to the image. I use split to break up the string
  // in an array, and then use slice(-1) to get the last item
  // and then [0] to get the element.
  const dog = avatar.src.split('/').slice(-1)[0];

  // get the index of the dog
  const index = dogs.indexOf( dog );

  // set the new src, from the dogs array, with the index + 1;
  // If index + 1 is larger than the length of the dogs-array
  // the % (remainder-operator) will make sure that the index
  // wraps around to 0, so we get the next name.
  avatar.src  = dogs[ ( index + 1 ) % dogs.length ];
  console.log( avatar.src );
}

var button = document.getElementById('button');
button.addEventListener('click', changeDog);
<img id="avatar" src="dog1.jpg" alt="avatar">
<button id="button">change dog</button>
0 голосов
/ 29 апреля 2019
function changeDog() {
  const dog = document.getElementById('avatar');

  const imgSrc = dog.src === "dog1.jpg" ? "dog2.jpg" : dog.src;
  dog.src = imgSrc;
}

 const button = document.getElementById('button');
 button.addEventListener('click', changeDog);
<img id="avatar" src="dog1.jpg" alt="avatar">
<button id="button">change dog</button>
0 голосов
/ 29 апреля 2019
function changeDog() {
  // you create a constant for document.getElementById().src, so do not need it every line
  const dog = document.getElementById('avatar').src;
  if (dog === "dog1.jpg" ) {
    dog = "dog2.jpg";
  }
  else {
    dog = "dog1.jpg";
  }
}    

const button= document.getElementById("button");
button.addEventListener("click", () => {
    changeDog();
}

Обновлен с var на let / const (новый стандарт), изменил ваше грубое уравнение на абсолютное и создал прямой вызов к слушателю событий, метод вызова, который я использовал, позволяет вам выполнять дополнительные действия после changeDog() также, если вы этого хотите.В вашем исходном коде было несколько проблем, которые мешали его запуску.

...