为什么 javascript 无法识别我创建的 ID 标签？

Question

我已经为元素 "characterImage" 提供了一个 ID 标签，但是 javascript 似乎没有意识到我已经为它提供了一个 ID，即使我使用了（例如）element.id = "desiredID".

firefox webConsole 一直返回 document.getElementById(..) is null"，即使我已经明确设置了一个 ID 并将其放在花括号中

我已经尝试了 setAttributeAs() 方法和 element.id = "desiredID"

{
let characterImage = document.createElement("IMG");
characterImage.id = "characterImg";
characterImage.src = "Story Game Photos";
characterImage.style.height = "250px";
characterImage.style.height = "250px";
}

function henryFunction(){
document.getElementById("characterImg").src = "Story Game photos/h.jpg";
document.getElementById("characterImg").appendChild(divCharacterImage);
}

我收到的错误消息：

TypeError: document.getElementById(...) is null

预期结果：javascript识别ID并将我想要的图片放在想要的位置

Answer 1

您必须将 image element 附加到文档中的元素。当元素出现在 DOM 中时，您可以使用 id 找到它，使用

document.getElementById()

添加行

 document.querySelector("body").appendChild(characterImage)

将元素附加到 body 标签

function a(){
let characterImage = document.createElement("IMG");
characterImage.id = "characterImg";
characterImage.src = "Story Game Photos";
characterImage.style.height = "250px";
characterImage.style.height = "250px";
document.querySelector("body").appendChild(characterImage)
henryFunction();
}

function henryFunction(){
document.getElementById("characterImg").src = "https://placekitten.com/g/200/300";  
}

a();

<html>
<body>
</body>
</html>

Answer 2

在从 dom 访问它之前，您必须将它附加到父级。所以在你的 main 函数中使用 .appendChild(divCharacterImage); befor 运行 henryFunction();.

function a(){
    let characterImage = document.createElement("IMG");
    characterImage.id = "characterImg";
    characterImage.src = "Story Game Photos";
    characterImage.style.height = "250px";
    characterImage.style.height = "250px";
    document.querySelector("body").appendChild(characterImage)
    document.getElementById("characterImg").appendChild(divCharacterImage);
    henryFunction();
}

function henryFunction(){
    document.getElementById("characterImg").src = "Story Game photos/h.jpg";
}

只需检查您的代码更新即可。

为什么 javascript 无法识别我创建的 ID 标签？

Why is javascript not recognising an ID tag I've created?

javascript

element