[ANSWERED] html – JavaScript Image Swap Errors

Question 1

On your img tags the onclick function is not wrote correctly should look like

onClick="changeImage()"

Also “changeImage” is not a function you wrote a function called “changePicture” so it should really look like

onClick="changePicture()"

Now in your changePicture function there are a few issues specifically the getElementById function is not being used correctly also you got the name wrong on it you capitalized the ‘D’ at the end which shouldn’t be, I would recommend changing the id on your header tag img from ‘Lilly’ to ‘preview’ since element id’s need to be unique and you’ve already used ‘Lilly’ as an id than replace your script tag with this

<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>

Question 2

I am trying to create an Image Swap with Javascript. Can anyone point me in the direction of where my coding error is in JavaScript? Am I using the getElementByID incorrectly? Any help or direction is much appreciated!

<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>

Bollate

[ANSWERED] html – JavaScript Image Swap Errors

By

Solution 1 :

Problem :

Comments

Comment posted by LcSkelt

Comment posted by the documentation for

Comment posted by Siguza

Comment posted by bleepbloopblop123

Comment posted by LcSkelt

Comment posted by bleepbloopblop123

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate