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>