How to validate between same/different integers?

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";
}

Button is disable in load
Anyone wanna try must to pick an image first to get the first integer called “Chosen Number” and click submit to get the second integer called “System Number” i need to validation this integers if equals give me message by alert, and else with alert message too.

You can check equality of numbers with the strict equality operator ===

1 === 1 // true
1 === 2 // false

How to use it and what’s the benefits, explain more with code exampls please

Somthing you should know, system number will be with random integers betweem 0 and 9 not only “0” it’s demo code.

if (aValue === theOtherValue) {
  doSomething();
} else {
  doSomethingElse();
}

You can make code branches by combining the strict equality operator with an if statement. For example, in your case, you can send one message to alert if the values are the same, and a different message to alert if the values are different.

1 Like

this method working but with length not with same integer i need to validate the integer automatically.

const randomizer = 0;
const item0 = document.getElementById(“item_0”).value = “0”;

	if (item0 === randomizer) {
	  alert("OK");
	} else {
	  alert("NO");
	}

Please check my code to test as well
https://codepen.io/hellthinky/pen/MWQoWPg

if not possible to validate between it i need to send it to online database to validation but i don’t know how to make it

i’m using slapform as a database Slapform

user side is already done such as:

  1. Pick Number from square numbers
    sqaure same number as value 0=0 .. etc
    message show in top with innerHTML as
    "Chosen Number : " + value-Of-images

Submit button with randomly integer from 0 to 9 only placed in bottom of first line above and will called result.



My side is to validate between the numbers to know he was win or lose.
if Value of chosen image == The random value from submit button
alert(“OK!”)
else alert("NO!")


Just want to validate between this intergers.

if same integer alert OK
if not same alert NO

Chosen number is message from list
System message is show after click button with random number from 0 to 9
That’s All!!!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.