I have a plan to use jQuery to change images. I have multiple image files named choose 01.png, choose 02.png, and so on. When an image is clicked, I want it to be replaced with the corresponding choose 01.png file. Once 5 images have been clicked and changed, I intend to remove them from the table and update the content inside the order id with new <p>. The image changes are purely cosmetic.
Below is my attempt at using jQuery to achieve this, but it doesn't seem to work as expected:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magic</title>
<link rel="stylesheet" href="magic.css">
</head>
<body>
<div id="board">
<div id="orders"></div>
<table>
<tr>
<td><img id="00" class="card" src="images/number 00.png" alt="0"></td>
...
<td><img id="09" class="card" src="images/number 09.png" alt="9"></td>
</tr>
</table>
</div>
<script src="../jquery-3.5.1.js"></script>
<script src="script.js"></script>
</body>
</html>
Javascript code using jQuery:
$(document).ready(function() {
$("#orders").append("Click 5 numbers you like.");
var choose = 0;
$(".card").click(function() {
var $id = $(this).attr("id");
$(this).attr("src", "images/choose"+$id+".png"); //Change the image when clicked
++choose;
if (choose == 5) {
$("#orders p").remove();
var display = "pfftt";
$("#orders").append(display);
}
});
});
Am I missing something in my code?