I have a selection of images representing numbers 1 through 9. When a user clicks on one of these images, I want to save the corresponding number (e.g., if they click on the image with the number 1, I want to save the number 1). However, I only require four numbers for the password. How can I ensure that the user inputs only four digits into a single variable?
Below is the code I am currently using:
<html>
<title>My Title</title>
<head><link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var selectedNumber;
function changeImage(number) {
document.getElementById("img").src = number;
}
</script>
</head>
<body>
<div class="login">
<img src="image/1.png" class="i-1" onclick='number('1')'/>
<img src="image/2.png" class="i-2" />
<img src="image/3.png" class="i-3" />
<img src="image/4.png" class="i-4" />
<img src="image/5.png" class="i-5" />
<img src="image/6.png" class="i-6" />
<img src="image/7.png" class="i-7" />
<img src="image/8.png" class="i-8" />
<img src="image/9.png" class="i-9" />
</div>
</body>
</html>