为什么我无法将捕获的目标元素分配给新的 src？

Question

我一直在尝试编写一个匹配的瓷砖游戏，当人与瓷砖互动时，它会显示颜色。为此，我为所有图块创建了一个事件监听器。在事件侦听器中，我捕获目标元素，然后在用户单击该元素时尝试更改目标元素的图像 src。

将 targetSrc 登录到控制台后，在使用 targetSrc = colour 为其分配新的 src 后，src 似乎是相同的。因此，图像在 DOM.

中保持不变

document.querySelectorAll('.tiles').forEach(tile => {
  tile.addEventListener('mousedown', function(event) {

    let targetElement = event.target;     //tile clicked on
    let targetId = targetElement.id;      //tile id eg; 1, 2, 3
    let targetSrc = targetElement.src;    //tile current colour eg; transparent.jpg
    let colour = tiles[targetId].url;     //tile hidden colour eg; red.jpg                   
    targetSrc = colour;                   //change image src
    
  }) 
})

然而，当我调整代码而不是写 targetElement.src = colour 时，src 发生了变化并且它起作用了。

举个例子，下面的代码可以完美运行

document.querySelectorAll('.tiles').forEach(tile => {
  tile.addEventListener('mousedown', function(event) {

    let targetElement = event.target;     //tile clicked on
    let targetId = targetElement.id;      //tile id eg; 1, 2, 3
    let targetSrc = targetElement.src;    //tile current colour eg; transparent.jpg
    let colour = tiles[targetId].url;     //tile hidden colour eg; red.jpg
    targetElement.src = colour;           //change image src
    
  }) 
})

为什么 targetElement.src 有效但 targetSrc 不起作用，即使它们是完全相同的代码？

Answer 1

这不是完全相同的代码。

 let targetSrc = targetElement.src;    //Here you are "retrieving" the src attribute

 targetElement.src = colour;           //Here you are "changing" the src attribute

为什么我无法将捕获的目标元素分配给新的 src？

How come I can't assign the captured target element to a new src?

javascript

event-listener

dom-events