Javascript for changing image source not working

Question

I am making a simple website which changes the image displayed when a button is clicked. But my code doesn't seem to be working as when I click on the button 'Click!' the alt text gets displayed instead of the image changing.The source of the images is perfectly fine, as when I use the same source outside the script the images show up.

<head>
    <title>Pic Change</title>
    <meta charset="utf-8">
    <meta name="Pic Change">
    <meta name="keywords" content="face,PES">
    <meta name="author" content="Thalle">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body class="body" style="background-color:#4682B4">
    <script>
    function display(whichimage){
        if(whichimage == 0){    
            document.getElementById('Click').src="C:\.....\Memes\Animals\initial.jpeg"
        }
        else{
            document.getElementById('Click').src="C:\.....\Memes\Animals\Whenlife.jpeg"
        }

    }
    </script>

    <image id="Click" src="C:\......\Memes\Animals\initial.jpg" alt="Click Button to click picture" style="width:300px;height:300px" >

    <p>
    <button type="button" onclick="display(1)">Click!</button>
    <button type="button" onclick="display(0)">Reset</button>
    </p>

</body>
</html>

Sam · Accepted Answer · 2017-01-16 02:32:18Z

The code is fine, you just forgot the file:// before the start. This code shows that when you give a working image src in your code, it will work just fine. Also, don't use files from your disk on Stack Overflow, it gives out private information that you probably don't want on the web.

<head>
    <title>Pic Change</title>
    <meta charset="utf-8">
    <meta name="Pic Change">
    <meta name="keywords" content="face,PES">
    <meta name="author" content="Thalle">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body class="body" style="background-color:#4682B4">
    <script>
    function display(whichimage){
        if(whichimage == 0){    
            document.getElementById('Click').src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico"
        }
        else{
            document.getElementById('Click').src="https://maxcdn.icons8.com/Share/icon/Animals//duck1600.png"
        }

    }
    </script>

    <image id="Click" src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico" alt="Click Button to click picture" style="width:300px;height:300px" >

    <p>
    <button type="button" onclick="display(1)">Click!</button>
    <button type="button" onclick="display(0)">Reset</button>
    </p>

</body>
</html>

ibrahim mahrir · Accepted Answer · 2017-01-15 18:29:58Z

0

You forgot the protocol (file://). It should be like

document.getElementById('Click').src="file://C:\Users...";

otherwise it will be just appended to the src everytime you click a button.

answered Jan 15, 2017 at 18:29

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Comments

TheYaXxE · Accepted Answer · 2017-01-15 19:10:57Z

0

Try to put your JavaScript in the <head> section. Then it might work.

Also. There is no such thing as image in HTML. It's img.

edited Jan 15, 2017 at 19:10

answered Jan 15, 2017 at 18:01

TheYaXxE

4,3043 gold badges24 silver badges35 bronze badges

1 Comment

klenium Over a year ago

No, it shouldn't. If he moves the script, that changes nothing, why would it?

tarulen · Accepted Answer · 2017-01-15 21:48:15Z

0

In javascript, you need to escape backslashes in strings, so in adresses in particular. Replace all "\" by "\\".

edited Jan 15, 2017 at 21:48

answered Jan 15, 2017 at 17:44

tarulen

2,10010 silver badges15 bronze badges

1 Comment

P. Fateev Over a year ago

try to specify the protocol: "file://C:\\Users\\..."

klenium · Accepted Answer · 2017-01-16 10:08:33Z

You shouldn't load images from your disk. We and others can't see it. If you use relative paths and you make sure every images and the HTML file is in the same directory, that should be fine. Even if you do, you must specify the file:// protocol. But if you use external images from a website, we could see them.

There is no <image> element in HTML. It's just <img>.

You should type \\ instead of \, because the \ character has a special meaning. However, Javascript is smart, and you can use / too, don't have to follow Windows' method.

Please don't use the onclick attribute. It's really old. Instead use event listeners.

Right now I don't know what is the problem in your code extacly, however, there is a working example:

<!DOCTYPE html>
<html>
    <title>Pic Change</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelector("button").addEventListener("click", function() {
                document.querySelector("img").setAttribute("src", "file://C:/Data/300x300-colored.png");
            });
        });
    </script>
    <p><img src="file://C:/Data/300x300.png" /></p>
    <p><button type="button">Click!</button></p>
</html>

If both images and the index.html is in the C:\Data directory, it works fine.

Collectives™ on Stack Overflow

Javascript for changing image source not working

5 Answers 5

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related