I have been trying for days to figure this out. I need to click on a radio button and have the image change. For example if I click on the golden gate bridge radio button I need it to switch the image to the picture of the bridge. So far I can only get it to click on the image and then the image changes but that is not what I want to do. I have tried many different ways and nothing works. I am new to JavaScript.
<!DOCTYPE html>
<html>
<body>
<!--Statue of Liberty image-->
<img id="statue" onclick="changeImage()"
src=
'https://www.history.com/.image/ar_4:3%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1
200/MTY1MTc1MTk3ODI0MDAxNjA5/topic-statue-of-liberty-gettyimages-960610006-promo.jpg'
width="300">
<p>Click the picture to change image.</p>
<script>
//Functon that changes mage when clicking on the image
function changeImage() {
var image = document.getElementById('statue');
if (image.src.match("statue")) {
image.src=
'https://www.history.com/.image/ar_4:3%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTY1MTc3MjE0MzExMDgxNTQ1/topic-golden-gate-bridge-gettyimages-177770941.jpg';
}
else if (image.src.match("bridge"))
{
image.src = "https://media-cldnry.s-nbcnews.com/image/upload/newscms/2020_26/3392557/200625-mount-rushmore-al-0708.jpg";
}
}
</script>
<!-- Radio buttons-->
<form>
<input type="radio" id = "statue-button" name = "landmark" checked value="statue"onClick= ('toggleImage')>Statue of Liberty<br>
<input type="radio" id = "bridge-button" name="landmark" value="bridge">Golden Gate Bridge<br>
<input type="radio" id = "rushmore-button" name="landmark" value="rushmore">Mount Rushmore<br>
</form>
</body>
</html>