JavaScript-未捕获引用错误：未定义my函数

有人能帮我解释为什么我会犯这个错误吗

未捕获引用错误：未定义选定的\u 1

未捕获引用错误：未定义选定的\u 2

这是我的密码：

<img src="/css/img/firstRoom_selected.png" onclick="selected_1()" id="firstRoom" style="cursor:pointer;">
<img src="/css/img/secondRoom.png" onclick="selected_2()" style=" cursor:pointer;">

<script>
$( document ).ready(function() {
  function selected_1() {

    if (document.getElementById("firstRoom").src == "/css/img/firstRoom.png") 
    {
        document.getElementById("firstRoom").src = "/css/img/firstRoom_selected.png";
    }
}

  function selected_2() {

    if (document.getElementById("firstRoom").src == "/css/img/firstRoom_selected.png") 
    {
        document.getElementById("firstRoom").src = "/css/img/firstRoom.png";
        document.getElementById("secondRoom").src = "/css/img/secondRoom_selected.png";
    }
}
});
</script>

提前多谢！：

您无需使用$document。准备好了吗

和js：

<script>
  function selected_1() {

    if (document.getElementById("firstRoom").src == "/css/img/firstRoom.png") 
    {
        document.getElementById("firstRoom").src = "/css/img/firstRoom_selected.png";
    }
}

  function selected_2() {

    if (document.getElementById("firstRoom").src == "/css/img/firstRoom_selected.png") 
    {
        document.getElementById("firstRoom").src = "/css/img/firstRoom.png";
        document.getElementById("secondRoom").src = "/css/img/secondRoom_selected.png";
    }
}
</script>

---

最好这样做：

$(function(){
    $('#firstRoom').click(selected_1)
})

---

您已经使用$document.ready在另一个匿名函数中定义了函数，因此它对全局范围不可见

您的图像正在全局范围中查找选定的_1和选定的_2，因此无法找到它

在$document.ready处理程序之外定义函数

如果希望在处理程序中使用函数，请在ready函数中附加click处理程序。试试这个脚本

您还应该研究预加载图像，这将是另一个问题

<script>
  function selected_1() {
    if (document.getElementById("firstRoom").src == "/css/img/firstRoom.png") {
        var image = new Image()
        image.src = "/css/img/firstRoom_selected.png";
        document.getElementById("firstRoom").src = image.src
    }
}

  function selected_2() {
    if (document.getElementById("firstRoom").src == "/css/img/firstRoom_selected.png") {
        var image = new Image()
        image.src = "/css/img/firstRoom.png";
        document.getElementById("firstRoom").src = image.src

        var image2 = new Image()
        image2.src = "/css/img/secondRoom_selected.png";
        document.getElementById("secondRoom").src = image2.src
    }
}
</script>

---

您是否尝试在脚本标记之后编写图像标记在dom准备就绪之前附加事件处理程序，但在dom准备就绪时定义函数，再次…好的，谢谢！但是现在当我点击其中一张图片时什么都没发生？

<script>
  function selected_1() {
    if (document.getElementById("firstRoom").src == "/css/img/firstRoom.png") {
        var image = new Image()
        image.src = "/css/img/firstRoom_selected.png";
        document.getElementById("firstRoom").src = image.src
    }
}

  function selected_2() {
    if (document.getElementById("firstRoom").src == "/css/img/firstRoom_selected.png") {
        var image = new Image()
        image.src = "/css/img/firstRoom.png";
        document.getElementById("firstRoom").src = image.src

        var image2 = new Image()
        image2.src = "/css/img/secondRoom_selected.png";
        document.getElementById("secondRoom").src = image2.src
    }
}
</script>