document id without code

By AYESHA KHAN -

 <!DOCTYPE html>

<html>

<head>

  <title>Simple Match Game</title>

  <style>

    button {

      font-size: 24px;

      padding: 15px 30px;

      margin: 10px;

      cursor: pointer;

    }

    #TextBox1, #TextBox2 {

      font-weight: bold;

      font-size: 20px;

      margin: 15px;

    }

  </style>

</head>

<body>


<h1>Match Game</h1>


<button id="btnA" onclick="checkMatch()">A</button>

<button id="btnApple" onclick="checkMatch()">Apple</button>

<button id="btnB" onclick="checkMatch()">B</button>

<button id="btnBall" onclick="checkMatch()">Ball</button>


<div id="TextBox2">Score: 0</div>

<div id="TextBox1"></div>


<button onclick="resetGame()">Reset</button>


<script>


TextBox1.innerHTML = "Click matching pairs!"

  var score = 0;

  var firstClick = "";


  function checkMatch() {

    var clickedBtn = event.target;


    if (firstClick === "") {

      firstClick = clickedBtn;

      clickedBtn.style.background = "yellow";

      return;

    }


    if ((firstClick.id === "btnA" && clickedBtn.id === "btnApple") ||

        (firstClick.id === "btnApple" && clickedBtn.id === "btnA") ||

        (firstClick.id === "btnB" && clickedBtn.id === "btnBall") ||

        (firstClick.id === "btnBall" && clickedBtn.id === "btnB")) {

      

      firstClick.style.display = "none";

      clickedBtn.style.display = "none";


      score++;

      document.querySelector("#TextBox2").innerHTML = "Score: " + score;


      if (score === 2) {

       TextBox1.innerHTML =  "You win!";

      } else {

        TextBox1.innerHTML = "Match!";

      }

    } else {

    TextBox1.innerHTML =  "Try again!";

    }


    firstClick.style.background = "";

    firstClick = "";

  }


  function resetGame() {

    score = 0;

    firstClick = "";

    document.querySelector("#TextBox2").innerHTML = "Score: 0";

    document.querySelector("#TextBox1").innerHTML = "Click matching pairs!";


    var buttons = ["#btnA", "#btnB", "#btnApple", "#btnBall"];

    buttons.forEach(function(selector) {

      var btn = document.querySelector(selector);

      btn.style.display = "";

      btn.style.background = "";

    });

  }

</script>


</body>

</html>

-----------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

  <style>

    button {

      padding: 20px;

      margin: 10px;

      font-size: 20px;

    }

  </style>

</head>

<body>


<!-- Buttons for matching -->

<button id="0">A</button>

<button id="0">Apple</button>

<button id="1">B</button>

<button id="1">Ball</button>


<!-- Result icon -->

<img id="result" style="display:none;width:50px;">


<script>

let firstElement = null;


const allButtons = document.querySelectorAll('button');


function disableButtons(disabled) {

  allButtons.forEach(btn => btn.disabled = disabled);

}


allButtons.forEach(btn => {

  btn.onclick = function () {

    if (this.style.visibility === 'hidden' || this.disabled) return;


    if (firstElement === null) {

      firstElement = this;

    } else {

      // Disable all buttons temporarily

      disableButtons(true);


      const secondElement = this;


      if (firstElement === secondElement || firstElement.id !== secondElement.id) {

        // Same button clicked twice OR different ids = wrong

        document.getElementById('result').src = "https://cdn-icons-png.flaticon.com/512/1828/1828843.png"; // ❌

      } else {

        // Correct match

        firstElement.style.visibility = 'hidden';

        secondElement.style.visibility = 'hidden';

        document.getElementById('result').src = "https://cdn-icons-png.flaticon.com/512/4436/4436481.png"; // ✅

      }


      document.getElementById('result').style.display = 'block';


      // Reset after a short delay

      setTimeout(() => {

        document.getElementById('result').style.display = 'none';

        firstElement = null;

        disableButtons(false);

      }, 1000);

    }

  };

});

</script>


</body>

</html>


-----------------------------------------------------------------------------------------------------------------------------


</html>

<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 20px;
margin: 10px;
font-size: 20px;
}
#TextBox1 {
font-weight: bold;
font-size: 20px;
margin: 15px;
}
</style>
</head>
<body>
<!-- Matching buttons with same IDs -->
<button id="0">A</button>
<button id="0">Apple</button>
<button id="1">B</button>
<button id="1">Ball</button>
<!-- Message display -->
<div id="TextBox1">Click matching pairs!</div>
<script>
let FirstClick = null;
let LastClick = null;
let buttons = document.querySelectorAll("button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
if (buttons[i].style.visibility === 'hidden') return;
if (FirstClick === null) {
FirstClick = buttons[i];
TextBox1.innerHTML = "Select second!";
} 
else {
LastClick = buttons[i];
// Prevent double click on same button
if (FirstClick !== LastClick) {
if (FirstClick.id === LastClick.id) {
FirstClick.style.visibility = "hidden";
LastClick.style.visibility = "hidden";
TextBox1.innerHTML = "Match!";
} 
else {
TextBox1.innerHTML = "Try again!";
}
} 
else {
TextBox1.innerHTML = "Don't click same button!";
}
// Reset both
FirstClick = null;
LastClick = null;
}
};
}
</script>
</body>
</html>


Other code 

<!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; }
        #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; }
        #msg { margin: 10px; height: 20px; }
    </style>
</head>
<body>
    <h1>A-Apple B-Ball Match</h1>
    <div id="game">
        <button id="btn1" class="btn" style="width:70px;height:50px;top:10px;left:10px;" onclick="pick(1)">A<br>Apple</button>
        <button id="btn2" class="btn" style="width:90px;height:40px;top:10px;left:90px;" onclick="pick(2)">B<br>Ball</button>
        <button id="btn3" class="btn" style="width:70px;height:50px;top:80px;left:90px;" onclick="pick(3)">A<br>Apple</button>
        <button id="btn4" class="btn" style="width:90px;height:40px;top:80px;left:10px;" onclick="pick(4)">B<br>Ball</button>
        <button id="try" onclick="reset()">TRY AGAIN</button>
    </div>
    <div id="msg">Pick two cards</div>

    <script>
        var firstPick = null;
        var secondPick = null;
        
        function pick(btnNum) {
            var btn = document.getElementById('btn'+btnNum);
            
            if (firstPick === null) {
                firstPick = btn;
                btn.style.background = 'orange';
            } 
            else if (secondPick === null && btn !== firstPick) {
                secondPick = btn;
                btn.style.background = 'orange';
                check();
            }
        }
        
        function check() {
            var sameSize = firstPick.offsetWidth === secondPick.offsetWidth && 
                          firstPick.offsetHeight === secondPick.offsetHeight;
            
            document.getElementById('msg').innerText = sameSize ? 'Match!' : 'No match!';
            document.getElementById('try').style.display = 'block';
        }
        
        function reset() {
            if (firstPick) firstPick.style.background = '#4682B4';
            if (secondPick) secondPick.style.background = '#4682B4';
            firstPick = null;
            secondPick = null;
            document.getElementById('try').style.display = 'none';
            document.getElementById('msg').innerText = 'Pick two cards';
        }
    </script>
</body>
</html>

Other code with first pic second pic
<!DOCTYPE html>
<html>
<head>
    <title>Simple Matching Game</title>
    <style>
        button { width: 80px; height: 80px; margin: 10px; font-size: 20px; }
        input { width: 80px; height: 30px; margin: 5px; font-size: 16px; }
        #msg { font-size: 20px; margin: 10px; }
        #try { padding: 8px 15px; margin: 10px; }
    </style>
</head>
<body>
    <div id="game">
        <button onclick="pickCard(0, this)">0</button>
        <button onclick="pickCard(1, this)">1</button>
        <button onclick="pickCard(0, this)">0</button>
        <button onclick="pickCard(1, this)">1</button>
        
        <div>
            First: <input type="text" id="first" readonly>
            Second: <input type="text" id="second" readonly>
        </div>
        
        <div id="msg">Pick two cards</div>
        <button id="try" onclick="reset()" style="display:none">Try Again</button>
    </div>

    <script>
        var firstPick = null;
        var secondPick = null;
        
        function pickCard(value, button) {
            if (button.disabled) return;
            
            if (firstPick === null) {
                firstPick = button;
                document.getElementById('first').value = value;
            } 
            else if (secondPick === null && button !== firstPick) {
                secondPick = button;
                document.getElementById('second').value = value;
                checkMatch();
            }
        }
        
        function checkMatch() {
            var msg = document.getElementById('msg');
            if (firstPick.innerHTML === secondPick.innerHTML) {
                msg.innerHTML = 'Match!';
                // Disable matched buttons
                firstPick.disabled = true;
                secondPick.disabled = true;
            } else {
                msg.innerHTML = 'No match!';
            }
            document.getElementById('try').style.display = 'block';
        }
        
        function reset() {
            // Re-enable all buttons
            var buttons = document.querySelectorAll('#game button:not(#try)');
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].disabled = false;
            }
            
            firstPick = null;
            secondPick = null;
            document.getElementById('first').value = '';
            document.getElementById('second').value = '';
            document.getElementById('msg').innerHTML = 'Pick two cards';
            document.getElementById('try').style.display = 'none';
        }
    </script>
</body>
</html>





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