Matching Game

By AYESHA KHAN -

 <!DOCTYPE html>

<button id="btn1">Button 1</button>

<button id="btn1">Button 1</button>

<button id="btn2">Button 2</button>

<button id="btn2">Button 2</button>


<script>

var buttons = document.querySelectorAll("button");

var hiddenButton = null;  // Track the hidden button


for (var i = 0; i < buttons.length; i++) {

buttons[i].onclick = function() {

if (hiddenButton) {

if (hiddenButton.id === this.id) {

hiddenButton.disabled = true;

this.disabled = true;

hiddenButton.style.visibility = "visible";

hiddenButton = null;

alert("✅ Match Found!");

} else {

hiddenButton.style.visibility = "visible";

hiddenButton = null;

alert("❌ Not a Match");

}

} else {

this.style.visibility = "hidden";

hiddenButton = this;

}

};

}

</script>


<!DOCTYPE html>

<button id="btn1">Button 1</button>

<button id="btn1">Button 1</button>

<button id="btn2">Button 2</button>

<button id="btn2">Button 2</button>


<script>

var btns = document.querySelectorAll("button");

var buttons = null;  // Track the hidden button


for (var i = 0; i < btns.length; i++) {

btns[i].onclick = function() {

if (buttons) {

if (buttons.id === this.id) {

buttons.disabled = true;

this.disabled = true;

buttons.style.visibility = "visible";

buttons = null;

alert("✅ Match Found!");

} else {

buttons.style.visibility = "visible";

buttons = null;

alert("❌ Not a Match");

}

} else {

this.style.visibility = "hidden";

buttons = this;

}

};

}

</script>




Comments

Post a Comment

Popular posts from this blog

cc app code button match with size return with Try Again Button

By AYESHA KHAN -
 <!DOCTYPE html> <html> <head>     <title>Size Match Game</title>     <style>         body { font-family: Arial; text-align: center; margin-top: 30px; }         #game { position: relative; width: 220px; height: 160px; margin: 0 auto; }         .btn { position: absolute; border: none; background: #4682B4; color: white;                cursor: pointer; border-radius: 5px; font-size: 14px; }         .btn:disabled { background: gray; cursor: not-allowed; } /* Style for disabled buttons */         #try { position: absolute; width: 100%; height: 100%; top: 0; left: 0;                background: rgba(0,0,0,0.7); color: white; display: none;                border: none; cursor: pointer; font-size: 18px; }     ...
Read more

AS2 in JavaScript add score 1 press button A and B clicked id null

By AYESHA KHAN -
 <!DOCTYPE html> <html> <body> <button id="btnA">Button A</button> <button id="btnB">Button B</button> <p>Score: <span id="score">0</span></p> <script> // Simple AS2-style button click handling var score = 0; var aPressed = false; var bPressed = false; // Create button objects like in AS2 btnA = document.getElementById("btnA"); btnB = document.getElementById("btnB"); // AS2-style onPress functions btnA.onPress = function() {   aPressed = true;   checkScore(); }; btnB.onPress = function() {   bPressed = true;   checkScore(); }; function checkScore() {   if (aPressed && bPressed) {     score++;     document.getElementById("score").textContent = score;     aPressed = bPressed = false; // Reset   } } // Add click listeners to simulate AS2 onPress btnA.addEventListener("click", btnA.onPress); btnB.addEventListener("click", btnB.onPre...
Read more

ClaudieAi Pair Game WITHOUT JS DOM OBJECT Direct access by ID ✅ ✔✔🌹🌹🎉

By AYESHA KHAN -
----------------------------------------------------------------------------------------------------------------------- Read More: https://cupidsnaps.blogspot.com/2025/06/button-id-matching-game-chat-gpt-add.html ------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE html> <html> <head>     <title>Simple Matching Game</title> </head> <body>     <h1>Match A with Apple, B with Ball</h1>          <button id="btnA">A</button>     <button id="btnApple">🍎</button>     <button id="btnB">B</button>     <button id="btnBall">🏀</button>          <p>Score: <span id="score">0</span></p>     <p id="message">Click two buttons to match!</p>     <button onclick="restart(...
Read more