时间戳

首页 > 解决方案 > JavaScript 图像交换错误

javascript - JavaScript 图像交换错误

问题描述

我正在尝试使用 Javascript 创建图像交换。谁能指出我在 JavaScript 中的编码错误的方向？我是否错误地使用了 getElementByID？非常感谢任何帮助或指导！

<title>Photo Gallery</title>
</head>
    <header>
        <h1>Gallery</h1>
        <div>
            <img alt="images" src="Skelton_ImageSwap/images/Lilly.jpg" 
            style="height: 350px; width: 350px" id="Lilly">
        </div>
    </header>
    <body>
    <img src="Skelton_ImageSwap/images/Lilly.jpg" alt ="images" id ='Lilly' onclick.changeImage()>
    <img src ="Skelton_ImageSwap/images/Lotus.jpg" alt = "images" id='Lotus' onclick.changeImage()>
    <img src="Skelton_ImageSwap/images/Roses.jpg" alt="images" id='Roses'onclick.changeImage()>
    <img src="Skelton_ImageSwap/images/Tulip.jpg" alt="images" id='Tulip'onclick.changeImage()>
    </body>

            <script>
                function changePicture()
                {
                     if (image.getElementByID.onclick.changePicture == "Lilly")
                {
                    image.src = "Skelton_ImageSwap/image/Lilly.jpg";
                }
                if (image.getElementByID.onclick.changePicture == "Orchid")
                {
                    image.src = "Skelton_ImageSwap/image/Orchid.jpg";
                }
                if (image.getElementByID.onclick.image == "Roses")
                {
                    image.src = "Skelton_ImageSwap/image/Roses.jpg";
                }
                else
                {
                     image.src = "Skelton_ImageSwap/image/Tulip.jpg";
                }
            }
            </script>

标签： javascripthtml

解决方案

在您的 img 标签上，未正确编写 onclick 函数应如下所示

onClick="changeImage()"

“changeImage”也不是一个函数，你写了一个名为“changePicture”的函数，所以它应该看起来像

onClick="changePicture()"

现在在您的 changePicture 函数中存在一些问题，特别是 getElementById 函数没有正确使用，而且您的名称错误，您最后将“D”大写，这不应该，我建议您更改您的 id从“Lilly”到“preview”的标头标签 img，因为元素 id 需要是唯一的，并且您已经使用“Lilly”作为 id，而不是用这个替换脚本标签

<script>
    document.getElementById("Lilly").addEventListener("click", function(){
        document.getElementById("preview").src = "Skelton_ImageSwap/image/Lilly.jpg"
    });
    document.getElementById("Lotus").addEventListener("click", function(){
        document.getElementById("preview").src = "Skelton_ImageSwap/image/Lotus.jpg"
    });
    document.getElementById("Roses").addEventListener("click", function(){
        document.getElementById("preview").src = "Skelton_ImageSwap/image/Roses.jpg"
    });
    document.getElementById("Tulip").addEventListener("click", function(){
        document.getElementById("preview").src = "Skelton_ImageSwap/image/Tulip.jpg"
    });
</script>

推荐阅读