JavaScript-未捕获的ReferenceError：我的函数未定义

Question

有人可以帮助我为什么会收到此错误吗？

未捕获的ReferenceError：未定义selected_1

未捕获的ReferenceError：未定义selected_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>

在此先多谢！ :)

Answer 1

您无需使用$( document ).ready

<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;">

和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>

Answer 2

最好这样做：

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

Answer 3

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

您的图像正在全局范围内寻找selected_1和selected_2 ，因此找不到它。

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

如果您希望在处理程序中使用函数，则将点击处理程序附加在ready函数中。 试试这个脚本

您还应该考虑预加载图像，这将是另一个问题。

<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>