Javascript 使用图像标记传递带有'；onclick'；

这段代码应该在单击图像时更改段落中的文本。但是，onclick函数不起作用，文本保持不变。请参阅代码：

HTML:

待更改
函数更改（）{
document.getElementById（“text”）.innerHTML=“文本已更改！”
}  

尝试在图像外添加一个div，并将onclick移动到图像上，如下所示：

<section class="buttons">
            <div onclick="change()"><img id="me" src="img/button_me.png"></div>
</section>

不过，它在img上也应该可以正常工作

您的代码正在工作

可能值得考虑更改触发事件的方式，内联

onclick

事件可能很难跟踪。您可以使用

jquery

通过引用

$（“img#me”）

将

单击事件添加到图像标记中（这将查找所有id为
me
的
img
标记，记住id应该是唯一的，这样您就可以只使用
$（“#me”）
）

您还可以使用选择器
$（“#text”）
选择要更改的段落，然后使用函数
.text（）
更改段落中的文本，或者如果需要该功能，使用函数
.html（）

为了回答这个问题，我还使用了一个指向占位符图像的链接



//将单击事件附加到id为“me”的“img”标记
$（“img#me”）。单击（函数（）{
//更改文本
$（“#text”）.text（“您单击了按钮”）；
//如果需要添加HTML，也可以使用以下选项：
//$（“#text”）.html（“您单击了按钮”）；
})

待更改
提供的代码片段按预期工作……我共享了完整的源代码！头文件中的script.js是包含更改函数的文件吗？如果是，则应将脚本标记向下移动到正文标记末尾之前。另外，您没有将更改功能包括在window.onload功能中。谢谢！现在可以了！在末尾包含脚本标记是一种好的做法吗？如果是，为什么？很高兴听到！是的。如果在头部包含脚本并引用任何html元素，则无法访问它们，因为它们尚未呈现。如果在所有元素之后包含脚本标记，则确保JavaScript了解这些元素。
// check if page is fully loaded
window.onload = function() {

}
function change(){
    document.getElementById("text").innerHTML = "You clicked the button";
}

<section class="buttons">
            <div onclick="change()"><img id="me" src="img/button_me.png"></div>
</section>