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

Question

I am new to Javascript. I just want to change the source of image to different one when user presses one of the 3 buttons. These buttons has different source. I don't know what is wrong with my code, apparently it does not work...

<!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: Edited all "Document" to "document" and fixed a syntax error.

Now it's weird. The page loads always with the 3rd image (03.jpg) opened, and pressing different buttons do not change the image.

JavaScript is case sensitive. Document does not exist, it should be document. You also have a syntax error in the HTML on button with id="one" -- there's an extra right parenthesis before the closing tag. — Cᴏʀʏ
– Cᴏʀʏ, Commented Oct 25, 2016 at 14:00
Changed all "Document" to "document", still not working. PS: Fixed the syntax error. still not working — Miruza
– Miruza, Commented Oct 25, 2016 at 14:02

Joe Clay · Accepted Answer · 2016-10-25 14:12:39Z

2

Aside from the mistake pointed out in the comments (Document != document), your main issue is the fact that you're calling ch_image earlier than you think you are. addEventListener expects you to pass in a function, but you're actually calling ch_image and then passing in the result. Your code should actually look like this:

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

(Additionally, I removed the false from each call, as that's the default anyway - you don't need to specify it every time!)

edited Oct 25, 2016 at 14:12

answered Oct 25, 2016 at 14:07

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Miruza Over a year ago

target.addEventListener(type, listener[, options]); listener The object that receives a notification (an object that implements the Event interface) when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function. IMO i was doing right

Joe Clay Over a year ago

@Miruza: There's an alternate definition if you pass a boolean as the last parameter: target.addEventListener(type, listener[, useCapture]). useCapture defaults to false, according to MDN.

Miruza Over a year ago

I saw the example in the[MDN, 'element.addEventListener("click", modifyText, false);' , and i did my code according to that example.

Joe Clay Over a year ago

@Miruza: Yeah, to be fair, some people prefer to be more specific about it :) Neither way is 'right', do whichever feels best for you.

Miruza Over a year ago

I was talking about the calling of function, to be exact :), i come from C background.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related