Почему слайдер стопорится на втором значении?

Question

[Денис Каракчиев]

Имеется некий кривой (зато свой) слайд. Проблема: переключается на вторую пикчу, а на третью не идет, бился челом о машинку клавишную 4 часа, но нервы не выдержали.

Вот сразу codepen, возможно будет удобнее

var imaga = document.querySelector('img');
window.timerId = window.setInterval(chng, 1000);
var imagaSrc = imaga.getAttribute('src');
var imagaAttr = imaga.getAttribute('myattr');
console.log(imagaAttr);
console.log(imagaSrc);
imaga.setAttribute('myattr', '1');
 
function chng() {
  if (imagaAttr == '1') {
    imaga.setAttribute('myattr', '2');
    imaga.src = 
      'http://theory.phphtml.net/exercises/javascript/base/zadachi-na-tajmery-javascript/smiles/2.png';
  } else if (imagaAttr == '2') {
    imaga.setAttribute('myattr', '3');
    imaga.src =
       'http://theory.phphtml.net/exercises/javascript/base/zadachi-na-tajmery-javascript/smiles/3.png';
    console.log('stop?');
  } else if (imagaAttr == '3') {
    imaga.setAttribute('myattr', '1');
    imaga.src = 
      'http://theory.phphtml.net/exercises/javascript/base/zadachi-na-tajmery-javascript/smiles/1.png';
    console.log('does zombie third?');
  } 
}
console.log(imagaAttr);

В Html такие дела:

<img myattr='1' 
    src='http://theory.phphtml.net/exercises/javascript/base/zadachi-na-tajmery-javascript/smiles/1.png'
    alt="sup" />

За пояснения буду лично высылать лучи добра.

Answer 1

[Виталий]

у вас атрибут не меняется, все время срабатывает if (imagaAttr == '1')

Comments

[Денис Каракчиев]

То есть вот эта строчка сразу под первым if'ом не устанавливает другой аттрибут?
imaga.setAttribute('myattr', '2');
А как тогда?

[Виталий]

Денис Каракчиев: у вас проверяется условие равенства imagaAttr , но оно не меняется ... добавьте в начало функции var imagaAttr = imaga.getAttribute('myattr'); и будет гуд

[Денис Каракчиев]

Виталий: Спасибо! Но есть ли какое-то логичное объяснение такому поведению? Потому что в эту переменную значение атрибута было записано (но вне функции, 4-й строчкой в скрипте), но работает все только если эта строка внутри функции. Почему так, ведь глобальные переменные должны быть доступны внутри функции?

[Виталий]

Денис Каракчиев: imagaAttr вне функции будет выполнено 1 раз, при инициализации скрипта .. т.е там всегда будет 1. Потому что когда пройдет 1000 миллисекунды, выполняется только функция. А там замена только у объекта imaga

[Денис Каракчиев]

Виталий: точно. спасибо =)