想通过javascript按钮改变图像src，但代码不工作

Want to change image src via button by javascript but code does not work

本文关键字：代码 工作 src 图像 javascript 按钮 改变      更新时间：2023-09-26

我是Javascript新手。我只是想改变图像的来源为不同的一个，当用户按下三个按钮之一。这些按钮有不同的来源。我不知道我的代码出了什么问题，显然它不工作…

<!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:将所有"Document"编辑为"Document"并修复了一个语法错误。

现在很奇怪。页面加载时总是打开第三张图片(03.jpg)，按不同的按钮不会改变图片

除了在评论中指出的错误(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，因为这是默认的-您不需要每次都指定它!)

相关文章：