Start talking with “two integers” need to validate between it to know is it same or different with alerts message sure not same message for both any message is accepted now and i will edit it later.
you can find it too on Codepen for a while
https://codepen.io/hellthinky/full/MWQoWPg
HTML Code
<section id="section">
<div class="lottery-container">
<h5 id="message"></h5>
<h5 id="result"></h5>
<div id="lottery-integers">
<img id="item-0" src="https://img.freepik.com/free-vector/abstract-blue-geometric-shapes-background_1035-17545.jpg?w=2000" alt="Lottery" onclick="ZeroClick()" tabindex="0">
<img id="item-1" src="https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000" alt="Lottery" onclick="OneClick()" tabindex="0">
<img id="item-2" src="https://img.freepik.com/free-photo/abstract-grunge-decorative-relief-navy-blue-stucco-wall-texture-wide-angle-rough-colored-background_1258-28311.jpg?w=2000" alt="Lottery" onclick="TwoClick()" tabindex="0">
<div>
<img id="item-3" src="https://img.freepik.com/free-vector/hand-painted-background-violet-orange-colours_23-2148427578.jpg?w=2000" alt="Lottery" onclick="ThreeClick()" tabindex="0">
<img id="item-4" src="https://wtspdp.com/wp-content/uploads/2022/01/1641978556_Picsart-background-hd-images-download.jpg" alt="Lottery" onclick="FourClick()" tabindex="0">
<img id="item-5" src="https://img.freepik.com/free-vector/painted-background-multicoloured-palette_23-2148427592.jpg?w=2000" alt="Lottery" onclick="FiveClick()" tabindex="0">
<img id="item-6" src="https://cbbackgroundhd.com/files/preview/800x1067/116472412470xrb4cza6rbydfmnghvrnwbwnomphyimwovnn8et6dwpqlayy6slk0wcryuygxeoozewihre8gedn48thurchdg4kplpgpqzckdr.jpg" alt="Lottery" onclick="SixClick()" tabindex="0">
</div>
<div>
<img id="item-7" src="https://img.freepik.com/free-vector/abstract-banner-background-with-red-shapes_1361-3348.jpg?w=2000" alt="Lottery" onclick="SevenClick()" tabindex="0">
<img id="item-8" src="https://media.istockphoto.com/photos/abstract-futuristic-background-with-a-pedestal-picture-id1311473275?b=1&k=20&m=1311473275&s=170667a&w=0&h=TQrpH65THptzwZHrMLx6Z5ItaG3aG2rCIYNt8l59NQk=" alt="Lottery" onclick="EightClick()" tabindex="0">
<img id="item-9" src="https://cdn.myimgstock.com/myimgstock/preview/window-cb-editing-background-full-hd-download-11643996346iuarls9aj2.jpg" alt="Lottery" onclick="NineClick()" tabindex="0">
</div>
<button type="submit" id="button" onclick="validation()" disabled>Start</button>
</div>
</div>
</section>
CSS Code
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body {
color: #928ce2;
line-height: 1.5;
background-color: #090923;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.lottery-container {
width: 100%;
height: auto;
text-align: center !important;
margin-top: 3em;
}
#message, #result {
text-transform: uppercase;
font-weight: 700 !important;
font-size: 14px;
}
img {
width: 90px;
height: 90px;
padding: 10px;
cursor: pointer;
position: relative;
display: inline-block;
margin: 4px !important;
background-color: white;
border-radius: 6px;
}
button {
cursor: pointer;
margin-top: 10px;
padding: 14px 8em;
line-height: 20px;
white-space: nowrap;
vertical-align: middle;
border-radius: 4px;
color: white;
font-weight: 600 !important;
background-color: #928ce2;
border: 1px solid #928ce2;
margin-bottom: 20px;
}
Javascript Code
var randomizer = 0;
var button = document.getElementById('button');
var message = document.getElementById("message");
var integers = document.getElementById('lottery-integers');
var result = document.getElementById("result");
var item0 = document.getElementById("item-0").value = "0";
var item1 = document.getElementById("item-1").value = "1";
var item2 = document.getElementById("item-2").value = "2";
var item3 = document.getElementById("item-3").value = "3";
var item4 = document.getElementById("item-4").value = "4";
var item5 = document.getElementById("item-5").value = "5";
var item6 = document.getElementById("item-6").value = "6";
var item7 = document.getElementById("item-7").value = "7";
var item8 = document.getElementById("item-8").value = "8";
var item9 = document.getElementById("item-9").value = "9";
function onLoad() {
button.disabled = true;
button.style.opacity = "40%";
}
function ZeroClick() {
message.innerHTML = "Chosen Number : " + item0;
button.disabled = false;
button.style.opacity = "100%";
}
function OneClick() {
message.innerHTML = "Chosen Number : " + item1;
button.disabled = false;
button.style.opacity = "100%";
}
function TwoClick() {
message.innerHTML = "Chosen Number : " + item2;
button.disabled = false;
button.style.opacity = "100%";
}
function ThreeClick() {
message.innerHTML = "Chosen Number : " + item3;
button.disabled = false;
button.style.opacity = "100%";
}
function FourClick() {
message.innerHTML = "Chosen Number : " + item4;
button.disabled = false;
button.style.opacity = "100%";
}
function FiveClick() {
message.innerHTML = "Chosen Number : " + item5;
button.disabled = false;
button.style.opacity = "100%";
}
function SixClick() {
message.innerHTML = "Chosen Number : " + item6;
button.disabled = false;
button.style.opacity = "100%";
}
function SevenClick() {
message.innerHTML = "Chosen Number : " + item7;
button.disabled = false;
button.style.opacity = "100%";
}
function EightClick() {
message.innerHTML = "Chosen Number : " + item8;
button.disabled = false;
button.style.opacity = "100%";
}
function NineClick() {
message.innerHTML = "Chosen Number : " + item9;
button.disabled = false;
button.style.opacity = "100%";
}
function validation() {
result.innerHTML = "System Number : " + randomizer;
integers.disabled = true;
integers.style.opacity = "40%";
integers.style.pointerEvents = "none";
}