想通過 javascript 通過按鈕更改圖像 src 但代碼不起作用

Question

我是 Javascript 的新手。 我只想在用戶按下 3 個按鈕之一時將圖像源更改為不同的源。 這些按鈕有不同的來源。 我不知道我的代碼有什么問題，顯然它不起作用......

<!doctype html>
<head>
    <title>Change image with button</title>
</head>

<body>
    <h3>Click on the buttons to change image</h3><br/><br/><br/>
    <img id="photo_mine" src="01.bmp"/><br/><br/>
    <button id="one">1</button> 
    <button id="two">2</button> 
    <button id="three">3</button>

    <script>
        document.getElementById("one").addEventListener("click", ch_image("01.bmp"), false);
        document.getElementById("two").addEventListener("click", ch_image("02.png"), false);
        document.getElementById("three").addEventListener("click", ch_image("03.jpg"), false);


        function ch_image(source_path) {
            var img_but = document.getElementById("photo_mine");
            img_but.src = source_path;
        }

    </script>
</body>

PS：將所有“文檔”編輯為“文檔”並修復了一個語法錯誤。

現在很奇怪。 頁面加載時總是打開第三張圖片 (03.jpg)，按不同的按鈕不會改變圖片。

Answer 1

除了評論中指出的錯誤（ Document != document ）之外，您的主要問題是您調用ch_image時間比您想象的要早。 addEventListener期望您傳入一個函數，但您實際上是在調用ch_image然后傳入result 。 您的代碼實際上應該如下所示：

<!doctype html>
<head>
    <title>Change image with button</title>
</head>

<body>
    <h3>Click on the buttons to change image</h3><br/><br/><br/>
    <img id="photo_mine" src="01.bmp"/><br/><br/>
    <button id="one">1</button> 
    <button id="two">2</button> 
    <button id="three">3</button>

    <script>
        document.getElementById("one").addEventListener("click", function () {
            ch_image("01.bmp");
        });

        document.getElementById("two").addEventListener("click", function () {
            ch_image("02.bmp");
        });

        document.getElementById("three").addEventListener("click", function () {
            ch_image("03.bmp");
        });


        function ch_image(source_path) {
            var img_but = document.getElementById("photo_mine");
            img_but.src = source_path;
        }

    </script>
</body>

（此外，我從每次調用中刪除了false ，因為無論如何這是默認值 - 您不需要每次都指定它！）

想通過 javascript 通過按鈕更改圖像 src 但代碼不起作用

問題描述

1 個解決方案

解決方案1
2 已采納 2016-10-25 14:07:10

想通過 javascript 通過按鈕更改圖像 src 但代碼不起作用

問題描述

1 個解決方案

解決方案1 2 已采納 2016-10-25 14:07:10

解決方案1
2 已采納 2016-10-25 14:07:10