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：将所有“文档”编辑为“文档”并修复语法错误。现在很奇怪。页面加载时始终打开第3张图像（03.jpg），按下不同的按钮不会改变图像。

Answer 1

除了评论中指出的错误（Document != document）之外，您的主要问题是您提前调用ch_image比您认为的更早。 addEventListener希望您传入一个函数，但是您实际上正在调用ch_image，然后传入结果。您的代码应该看起来像这样：

<!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 个答案: