The HTML page shown below allows you to click on monsters to make them disappear
and to restore them by clicking a button. The monster images are in this
zipfile: images.zip.Translate
the jQuery code on the HTML page to vanilla JavaScript. For the image click
event handler, use a click event object e and
e.target to determine which monster was clicked so you can hide it. For
the button click event handler, use a for loop to show all the monsters. For
full credit, use the document methods querySelector and
querySelectorAll instead of
getElementById and
getElementsByTagName.
Here is the HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Click Away Monsters</title>
<style>
body { font-family: Georgia, serif; }
img { height: 125px; width: 125px; }
h1, p { color: green; }
</style>
<!-- Alternatively, you can also use the
Google jQuery link. -->
<script src="../jquery-3.6.1.js"></script>
<script>
$(function( ) {
$("img").click(function( ) {
$(this).hide( );
});
$("#btn1").click(function( ) {
$("img").show( );
});
});
</script>
</head>
<body>
<h1>Click Away Monsters</h1>
<p>Click on each monster to make it disappear.</p>
<img src="images/monster1.png">
<img src="images/monster2.png"><br>
<img src="images/monster3.png">
<img src="images/monster4.png"><br><br>
<button id="btn1">Click to Restore Monsters</button>
</body>
</html>