//OUTPUT: Changing an image

<New code>

//OUTPUT: document.getElementById("imageID").src = "http://link.to/my/image.jpg";
— updates #imageID with a link to a new image

Replacing one image with another is easy!

For example:

...is made with:

<body>
    <p>
        <img 
            id="imageID" 
            src="https://www.kasandbox.org/programming-images/cute/Rock.png" />
            
        <button id="buttonID">
            I am mighty!<br />and powerful!<br />and can change this here rock into a star!
        </button>
    </p>

    <script>
        //OUTPUT: replace the src of #imageID with a star
        var changeImage = function () {
            document.getElementById('imageID').src 
                = "https://www.kasandbox.org/programming-images/cute/Star.png"
        }
        
        //INPUT: trigger changeImage when #buttonID is pressed
        document.getElementById('buttonID').onclick = changeImage;
    </script>
</body>