无法在 DOM javascript 中更改图像源

Question

我是 Rahul，我是编码新手。我有一个与 DOM 事件相关的查询。请看下面的代码sn -p -

let door1 = document.getElementById('one');
door1.src = "closed_door.svg";
const isClicked = (door) => {
    if(door.src === "closed_door.svg") {
        return true;
    }
    else {
        return false;
    }
};
door1.onclick = () => {
    if(isClicked(door1)) {
    door1.src = "beach.svg";}
};

简单地说，one 是元素的 id。如果没有 isClicked，我可以在单击时成功地将 src 从关闭的门更改为海滩。但是当我引入 isClick 时，它并没有改变。有人可以告诉我我错过了什么。我会很感激的

注意 - 我正在构建与此类似的游戏 - https://s3.amazonaws.com/codecademy-content/projects/chore-door/chore-door-final/index.html 他们使用与我相同的过程。所以请提出一个解决方案，告诉我我在这里犯的错误，而不是问题的替代方案

问候 拉胡尔

Answer 1

据报道here：

src 反射属性将是解析后的 URL — 即变成的绝对 URL。因此，如果在页面 http://www.example.com 上，document.getElementById("foo").src 会给你“http://www.example.com/images/example.png”。

所以要获得真正的src 属性，您应该像这样使用.getAttribute('src')：

const isClicked = (door) => {
    if(door.getAttribute('src') === "closed_door.svg") {
        return true;
    }
    else {
        return false;
    }
};

Ans 也顺便说一句，您可以将其快捷方式：

const isClicked = (door) => door.getAttribute('src') === "closed_door.svg";

Answer 2

用这个替换你的代码..

let door1 = document.getElementById('one');
door1.src = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";
const isClicked = (door1) => {
    if(door1.src === "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg") {
        return true;
    }
    else {
        return false;
    }
};

door1.onclick = () => {
    if(isClicked(door1)) {
    door1.src = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";}
};