I’m having trouble getting the code below to display an image once I press a button, can you help me, please?
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″/>
<title>JavaScript example</title>
<style>
table, td {border: 1px solid black; border-collapse: collapse;}
</style>
</head>
<body>
<h1 style=”text-align:center;”> Changing the colours of the balloons</h1>
<br>
<p style=”text-align:center;”>This example should show how JavaScript can change the source attribute (src) of an image.<br>
Complete the example by entering the code to display the correct colour balloon in the cell when each button is clicked.</p>
<table style=”margin-left:auto; margin-right:auto;”>
<tr>
<td style=”height:300px”><img src=”” id=”balloon” width=”200″ alt=”id = balloon – placeholder”></td>
</tr>
</table>
<p style=”text-align:center;”>Click the colour to show the balloon in the cell</p><br>
<p style=”text-align:center;”>
<button type=”button” onClick=”ShowRed()”>Red</button>
<button type=”button” onClick=”ShowGreen()”>Green</button>
<button type=”button” onClick=”ShowBlue()”>Blue</button>
</p>
<script>
function ShowRed() {
document.GetElementById(“baloon”).src = “RedBaloonAdjusted.jpg”; //This will be the function executed when you click the Red button. It will change the source of the image to display the red baloon.
}
function ShowBlue() {
document.GetElementById(“baloon”).src = “GreenBaloonAdjusted.jpg”; //This will be the function executed when you click the Green button. It will change the source of the image to display the Green baloon.
}
function ShowGreen() {
document.GetElementById(“baloon”).src = “BlueBaloonAdjusted.jpg”; //This will be the function executed when you click the Blue button. It will change the source of the image to display the Blue baloon.
}
</script>
</body>
</html>
