Изменение внутреннего HTML определенного элемента при появлении специального изображения случайного массива

Question

Я хочу изменить внутренний HTML кнопки button1, когда появляется изображение ('/robot.svg'). Logi c отлично работает, когда я закомментирую предложение if, однако я не могу заставить его работать.

<img src="/closed_door.svg" alt="closed_door" id="1">
<button id="button">Good luck</button>



let links = ['/beach.svg', '/robot.svg', '/space.svg']
let pic1 = document.getElementById("1")
let button1 = document.getElementById("button")



button1.onclick = function () {
      pic1.src = links[Math.floor(Math.random()*3)]

 if (pic1.src === '/robot.svg') {
  
    button1.innerHTML = 'game over';
  }  
}

Спасибо, что прочитали или даже помогли новичку!

Answer 1

Вам нужно разобрать имя изображения из src при сравнении:

let links = ['/beach.svg', '/robot.svg', '/space.svg']
let pic1 = document.getElementById("1")
let button1 = document.getElementById("button")

button1.onclick = function () {
      pic1.src = links[Math.floor(Math.random()*3)];
      let name = (pic1.src).substring((pic1.src).lastIndexOf("/"));
      console.log(name);
      if (name === '/robot.svg') {
           button1.innerHTML = 'game over';
      }  
}

<img src="/closed_door.svg" alt="closed_door" id="1">
<button id="button">Good luck</button>