Setting button to change image Javascript

Question

It should be straight forward but I can not get a function to change the image on button click. Please can anyone spot what is wrong with the below code. Thanks in advance.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BlankCordovaApp4</title>

<!-- BlankCordovaApp4 references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<p>Greeting!</p>

<img id="demo" src="images/hello.jpg" width="180" height="123">

<button id="Btn" type="button" onclick="changeImage();">Click Me</button>

<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>

<script src="scripts/platformOverrides.js"></script>

<script src="scripts/index.js"></script>


<script>

function changeImage() {

document.getelementbyid("demo").src = "images/bye.jpg";
};

</script>

</body>
</html>

You need to use getElementById('demo') This function is case sensitive — Jackson
– Jackson, Commented Feb 22, 2015 at 16:48
learn how to debug JavaScript using browser's inspect element or tools like firebug — AtanuCSE
– AtanuCSE, Commented Feb 22, 2015 at 16:55

dfsq · Accepted Answer · 2015-02-22 16:48:17Z

3

It should be:

document.getElementById("demo").src = "images/bye.jpg";

Case matters in javascript: getelementbyid is not the same as getElementById.

answered Feb 22, 2015 at 16:48

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

dewd Over a year ago

@HarryBains you can see javascript errors in a console. hit F12 on most browsers.

Collectives™ on Stack Overflow

Setting button to change image Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related