При сравнении в if e.target.src всегда false

Question

При сравнении значений e.target.src всегда выдает false, даже если явно прописать значение. В чем причина? statusImg.device.enable - 'это объект с картинками

var buttonsPictures = document.querySelector('.buttons__pictures');
let statusImg = {
  cpu: {
    desable: '/img/CpuDesable.png',
    enable: '/img/CpuEnable.png',
    active: '/img/CpuActive.png'
  },
  device: {
    desable: '/img/mehDesable.png',
    enable: '/img/mehEnable.png',
    active: '/img/mehActive.png'
  }
}
buttonsPictures.addEventListener('click', function(e) {
  if (e.target.classList.contains('device')) {

    if (e.target.src == statusImg.device.enable) {
      console.log(e.target.src);
      e.target.src = statusImg.device.active;
    }
  };
  if (e.target.classList.contains('cpu')) {
    if (e.target.src == statusImg.cpu.enable) {
      e.target.src = statusImg.cpu.active;
    }
  };
})

<!DOCTYPE html>
<html lang="ru">

<head>
</head>

<body>

  <div class="buttons__pictures">

    <img src="/img/mehDesable.png" alt="" class="device">
    <img src="/img/mehDesable.png" alt="" class="device">
    <img src="/img/mehDesable.png" alt="" class="device">
    <img src="/img/mehDesable.png" alt="" class="device">

    <img src="/img/CpuDesable.png" alt="" class="cpu">
    <img src="/img/CpuDesable.png" alt="" class="cpu">
    <img src="/img/CpuDesable.png" alt="" class="cpu">
    <img src="/img/CpuDesable.png" alt="" class="cpu">

    <img src="/img/Soul.png" alt="" class="soul">

  </div>
</body>

</html>

buttonsPictures.addEventListener('click', function(e){
    if (e.target.classList.contains('device')){
         
         if (e.target.src == statusImg.device.enable){
            console.log(e.target.src);
         e.target.src = statusImg.device.active;}
    };

Answer 1

Тут 2 момента. Во-первых, Вы банально запутались в enable и disable: в картинке, по которой идёт клик, у вас src="/img/mehDesable.png", а сравниваете Вы это значение с statusImg.device.enable, где записано /img/mehEnable.png. Разумеется, такая проверка не пройдёт.

Но есть ещё и второй момент: e.target.src даёт полный абсолютный пусть к картинке, а в statusImg у Вас относительные пути. Соответственно, проверять нужно не на совпадение, а на наличие подстроки в строке:

var buttonsPictures = document.querySelector('.buttons__pictures');
let statusImg = {
  cpu: {
    desable: '/img/CpuDesable.png',
    enable: '/img/CpuEnable.png',
    active: '/img/CpuActive.png'
  },
  device: {
    desable: '/img/mehDesable.png',
    enable: '/img/mehEnable.png',
    active: '/img/mehActive.png'
  }
}
buttonsPictures.addEventListener('click', function(e) {
  if (e.target.classList.contains('device')) {
    console.log(e.target.src); // что содержит e.target.src
    console.log(statusImg.device.desable); //а что содержит statusImg.device.desable
    if (e.target.src.indexOf(statusImg.device.desable) != -1) {
      e.target.src = statusImg.device.active;
      console.log(true);
    }
  }
  /*if (e.target.classList.contains('cpu')) {
    if (e.target.src == statusImg.cpu.enable) {
      e.target.src = statusImg.cpu.active;
    }
  }*/
})

.buttons__pictures {
  border: 1px solid red;
}
.device {
  border: 1px solid green;
  padding: 5px;
}
.cpu {
  border: 1px solid blue;
  padding: 5px;
}

  <div class="buttons__pictures">

    <img src="/img/mehDesable.png" alt="" class="device">
    <img src="/img/mehDesable.png" alt="" class="device">
    <img src="/img/mehDesable.png" alt="" class="device">
    <img src="/img/mehDesable.png" alt="" class="device">

    <img src="/img/CpuDesable.png" alt="" class="cpu">
    <img src="/img/CpuDesable.png" alt="" class="cpu">
    <img src="/img/CpuDesable.png" alt="" class="cpu">
    <img src="/img/CpuDesable.png" alt="" class="cpu">

    <img src="/img/Soul.png" alt="" class="soul">

  </div>

БЛОГ НА HUSL

При сравнении в if e.target.src всегда false

Ответы (1 шт):