按钮点击不'没有回应

Button onclick doesn't respond

本文关键字：回应 按钮      更新时间：2023-09-26

我对JavaScript还很陌生，我正试图将自己的图像库作为我的第一个简单项目。我本以为会进展顺利，但似乎我犯了一些微不足道的错误，我不知道在哪里。

因此，我最初的计划是：我将设置一个具有空src属性的image元素，创建一个图像名称数组，添加一个函数，该函数在任何时候触发时都会将数组指针增加1，然后将数组中的相应值添加到src。

不过，它不起作用。你能试着看看代码中有什么错误吗？我真的不知道该怎么办，就是找不到错误。

<html>
    <body>
        <img src="" id="imageCanvas">
        <div id="counterDisplay"></div>
        
        <script type="text/javascript">
        var images = ["increased.jpg","knight.jpg","knight-g.jpg","golden.jpg","land.jpg"];
        var counterDisplay = document.getElementById("counterDisplay");
        var imageCanvas = document.getElementById("imageCanvas");
        var imageCount = 0;
        
                // function intended to increase the array position indicator by 1, but it always only increases it in relation to the original imageCount value (0), how to make it save the already increased value?
        function changeCount() {
            imageCount = imageCount+1;
        }
        
        counterDisplay.innerHTML = imageCount;
        imageCanvas.setAttribute("src",images[imageCount]);
            
        </script>
                // The main problem: it just refuses to respond!
        <button onclick="changeCount()">NEXT</button>
    </body>
</html>

我没有对此进行调试，但我的猜测是正在调用onclick，但您没有更新changeCount代码中的计数。

尝试将几乎所有的代码都放在changeCount中。

function changeCount() {
    imageCount = imageCount+1;
    counterDisplay.innerHTML = imageCount;
    imageCanvas.setAttribute("src",images[imageCount]);
}

单击按钮时会运行此函数。

function changeCount() {
    imageCount = imageCount+1;
}

此代码在第一次加载脚本时运行。

counterDisplay.innerHTML = imageCount;
imageCanvas.setAttribute("src",images[imageCount]);

您希望它在单击按钮时运行。在函数中移动它。

相关文章：