Compared if e.target.src is always false



  • When comparing e.target.src, it is always false, even if it is clear to describe the value. What's the reason?

    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">

    &lt;img src="/img/mehDesable.png" alt="" class="device"&gt;
    &lt;img src="/img/mehDesable.png" alt="" class="device"&gt;
    &lt;img src="/img/mehDesable.png" alt="" class="device"&gt;
    &lt;img src="/img/mehDesable.png" alt="" class="device"&gt;
    
    &lt;img src="/img/CpuDesable.png" alt="" class="cpu"&gt;
    &lt;img src="/img/CpuDesable.png" alt="" class="cpu"&gt;
    &lt;img src="/img/CpuDesable.png" alt="" class="cpu"&gt;
    &lt;img src="/img/CpuDesable.png" alt="" class="cpu"&gt;
    
    &lt;img src="/img/Soul.png" alt="" class="soul"&gt;
    

    </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;}
    };
    



  • There are two points. First of all, you've been bluntly confused and disable: in a picture of the click, you've got src="/img/mehDesable.png, and compare it to status Img.device.enable, where /img/mehEnable.png. Of course it won't pass.

    But there's a second point: e.target.src gives you a complete absolute picture, and in statusImg you have relative paths. Accordingly, it is not a coincidence to be checked, but to have a substrate in the line:

    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">
    
    &lt;img src="/img/mehDesable.png" alt="" class="device"&gt;
    &lt;img src="/img/mehDesable.png" alt="" class="device"&gt;
    &lt;img src="/img/mehDesable.png" alt="" class="device"&gt;
    &lt;img src="/img/mehDesable.png" alt="" class="device"&gt;
    
    &lt;img src="/img/CpuDesable.png" alt="" class="cpu"&gt;
    &lt;img src="/img/CpuDesable.png" alt="" class="cpu"&gt;
    &lt;img src="/img/CpuDesable.png" alt="" class="cpu"&gt;
    &lt;img src="/img/CpuDesable.png" alt="" class="cpu"&gt;
    
    &lt;img src="/img/Soul.png" alt="" class="soul"&gt;
    

    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2