Saturday, 23 March 2024

When 2 Buttons Clicked True Then Show Image ✅✅✅

 



---------------------------------------------------------------------------------------------------------------
<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>
<img src="https://i.imgur.com/yz4F2kF.jpg" id="image" style="display: none; width: 50px; height: 50px;">
<span id="emojiIcon" style="display: none; font-size: 40px; margin-left: 10px;">🎉</span>
<script>
var Btn1Clicked = false;
var Btn2Clicked = false;
Btn1.addEventListener("click", BtnFunction1, true);
function BtnFunction1() {
Btn1Clicked = true;
checkButtons();
};
Btn2.addEventListener("click", BtnFunction2, true);
function BtnFunction2() {
Btn2Clicked = true;
checkButtons();
};
function checkButtons() {
if (Btn1Clicked == true && Btn2Clicked == true) {
image.style.display = "block";
emojiIcon.style.display = "inline";
Btn1.remove();
Btn2.remove();
} else {
image.style.display = "none";
emojiIcon.style.display = "none";
}
}
</script>


-------------------------------------------------------------------------------------------------
OTHER CODE 
We Also use this Code
https://cupidsnaps.blogspot.com/2025/06/claude-when-2-different-aand-b-click.html
-------------------------------------------------------------------------------------------------
<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>
<button id="ResetBtn">Restart</button>
<img src="https://cdn.pixabay.com/photo/2016/03/31/14/37/check-mark-1292787_640.png"" id="matchImage" alt="Success Image">
<br>
<div id="TextBox1"></div>
<div id="TextBox2"></div>
<br><br>
<style>
button { padding: 10px 20px; font-size: 16px; margin: 10px; }
#matchImage { display: none; margin: 20px; width: 100px; }
#TextBox1{ 
padding: 10px; 
margin: 10px; 
width: 200px;
background-color:Khaki;
color:Red;
border-radius: 8px;
font-size: 22px;
line-height: 22px;
border:5px solid Green;
}
#TextBox2{ 
padding: 10px; 
margin: 10px; 
width: 200px;
background-color:Khaki;
color:Red;
border-radius: 8px;
font-size: 22px;
line-height: 22px;
border:5px solid Green;
}
</style>
<script>
var Btn1Clicked = false;
var Btn2Clicked = false;
var Score = 0;
TextBox1.innerHTML = "";
matchImage.style.display = "none";
Btn1.onclick = function(){
Btn1Clicked = true;
var clickedId = event.target.id;
TextBox1.innerHTML += clickedId;
checkMatch();
};
Btn2.onclick = function() {
var clickedId = event.target.id;
TextBox1.innerHTML += clickedId;
Btn2Clicked = true;
checkMatch();
};
// AS2-style match check with your exact condition
function checkMatch() {
if(Btn1Clicked == true && Btn2Clicked == true) {
Score++;
matchImage.style.display = "block";
var clickedId = event.target.id;
TextBox1.innerHTML += clickedId
TextBox2.innerHTML = Score
Btn1.style.visibility = "hidden";
Btn2.style.visibility = "hidden";
}
}
// AS2-style reset function
ResetBtn.onclick = function() {
Btn1Clicked = false;
Btn2Clicked = false;
matchImage.style.display = "none";
Btn1.style.visibility = "visible";
Btn2.style.visibility = "visible";
TextBox1.innerHTML = "";
TextBox2.innerHTML = Score = 0;
};
</script>

-------------------------------------------------------------------------------------------------
We Also use this Code
Read More For Array Functions:
https://fbgadgets.blogspot.com/2017/08/get-button-id-after-click-in-java-script.html
https://fbgadgets.blogspot.com/2018/08/js-function.html
-------------------------------------------------------------------------------------------------
for (var i = 0; i <btnArray.length; i++) {
btnArray[i].onclick = function (){
checkButtons();
Btn1Clicked = true;
Btn2Clicked = true;
}
}
Code write this way when same button id
<!DOCTYPE html>
<html>
<body>
 <button id="A1">A1</button>
 <button id="A1">A2</button>
 <button id="B1">B1</button>
 <button id="B1">B2</button>

  <br><br>

  <input type="text" id="buttonDisplay" readonly style="width: 200px; padding: 5px; font-size: 16px;">
  <script>
 // Get button elements
 var btnArray = document.querySelectorAll('button');
 var display = document.getElementById('buttonDisplay');

 //Add click handlers using for loop
for (var i = 0; i < btnArray.length; i++) {
btnArray[i].onclick = function() {
// Simply show the button ID in text box
 display.value = this.id;
}
}
 </script>
</body>
</html>
-------------------------------------------------------------------------------------------------
Useable lines In Under Code
When Button Two id Same or Different Like
<button id="A1" <button id="A1"
We Use Line
(1)Selector All and (2)Tag Name Method
var BtnArray = document.querySelectorAll("button");

We Don't Need To Use For Under Code Selector Or Tag Line
We Also Use This Line For Under Code

A1[i].onclick = function() {

When Button Two Id Different Like A1 A2 We Use
 
var BtnArray = [A1,A2] 

<button id="A1" <button id="A2"

We Only Use Get Element By Id 
When Button Id Different 

var BtnArray = [
document.getElementById('A1'),
document.getElementById('A2')
]; 

We Only Use Get Element By Class Name 
When Button Id Different Or Same use innerhtml 
for Br tag

<button class="BtnClass A1" 
<button class="BtnClass A2"

var BtnArray = document.getElementsByClassName('BtnClass')
TextBox1.textContent += event.target.className.split(' ')[1];
TextBox1.innerHTML += event.target.className + "<br>";
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
<button id="A1" style="height: 40px; width: 80px;">A1</button>
<button id="A1" style="height: 40px; width: 80px;">A1</button>
<br><br>
<div id="TextBox1" style="height: 20px; width: 320px; font-size: 16px; border: 5px solid red ; "></div>
<script>
var BtnArray = document.getElementsByTagName('button');
for (var i = 0; i < 2; i++) {
BtnArray[i].onclick = function() {
TextBox1.textContent += this.id;
};
}
</script>
-------------------------------------------------------------------------------------------------
<html>
<head>
<title>Show Image On Condition</title>
</head>
<body>
<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>
<img src="https://via.placeholder.com/150" id="image" style="display: none;">
<script>
var Btn1Clicked = false;
var Btn2Clicked = false;
var btnArray=[Btn1,Btn2]
for(var i = 0; i <btnArray.length; i++) {
btnArray[i].addEventListener("click",MatchingFunction,true);
function MatchingFunction(event) {
checkButtons();
Btn1Clicked = true;
Btn2Clicked = true;
}
}
function checkButtons() {
if(Btn1Clicked == true && Btn2Clicked == true) {
image.style.display = "block";
}
else {
image.style.display = "none";
}
}
</script>
</body>
</html>

-------------------------------------------------------------------------------------------------
<html>
<head>
<title>Show Image On Condition</title>
</head>
<body>

<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>

<img src="https://via.placeholder.com/150" id="image" style="display: none;">

<script>

var BtnClicked = [false, false];

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

buttons.forEach(function(button, index) {
    button.addEventListener("click", function() {
        BtnClicked[index] = true;
        checkButtons();
    });
});

function checkButtons() {
    if (BtnClicked.includes(false)) {
        image.style.display = "none";
    } else {
        image.style.display = "block";
    }
}

</script>
</body>
</html>

-------------------------------------------------------------------------------------------------
WHEN ARRAY INDEX ARE SAME OR TEXT BOX INNER HTML SAME THEN SHOW IMAGE
-------------------------------------------------------------------------------------------------
<div id="TextBox1"></div>
<div id="TextBox2"></div>

<img src="https://via.placeholder.com/150" id="image" style="display: none;">

<button id="A1">A1</button>
<button id="A2">A2</button>

<button id="B1">B1</button>
<button id="B2">B2</button>

<script type='text/javascript'>
//<![CDATA[

var FirstBtnArray=[A1,A2]
for (var i =0;i<FirstBtnArray.length; i++){
FirstBtnArray[i].onclick = function(){
TextBox1.innerHTML= FirstBtnArray.indexOf(this);
checkButtons();
}
}


var SecondBtnArray=[B1,B2]
for (var j =0;j<SecondBtnArray.length; j++){
SecondBtnArray[j].onclick = function(){
TextBox2.innerHTML= SecondBtnArray.indexOf(this);
checkButtons();
}
}


function checkButtons() {
if(TextBox1.innerHTML==TextBox2.innerHTML) {
image.style.display = "block";
}
else {
image.style.display = "none";
}
}

//]]>

</script>
-------------------------------------------------------------------------------------------------
WHEN TWO TEXT BOXES  FIND BUTTON EVENT TARGET VALUE SAME 
-------------------------------------------------------------------------------------------------
<div id="TextBox1"></div>
<div id="TextBox2"></div>

<img src="https://via.placeholder.com/150" id="image" style="display: none;">

<button id="A1" value="0">A1</button>
<button id="A2" value="1">A2</button>

<button id="B1" value="0">B1</button>
<button id="B2" value="1">B2</button>

<style>
#A1,
#A2 {
display: inline-block;
background-color: Green;
border-radius: 5px;
color: white;
cursor: pointer;
width: 50px;
padding: 6px 25px;
text-align: center;
}
</style>

<script type='text/javascript'>

var FirstBtnArray = [A1, A2];
for (var i = 0; i < FirstBtnArray.length; i++) {
FirstBtnArray[i].addEventListener('click', FirstBtnArrayFunction);
}

var SecondBtnArray = [B1, B2];
for (var j = 0; j < SecondBtnArray.length; j++) {
SecondBtnArray[j].addEventListener('click', SecondBtnArrayFunction);
}

function FirstBtnArrayFunction(event) {
TextBox1.innerHTML = event.target.value;
checkButtons();
}

function SecondBtnArrayFunction(event) {
TextBox2.innerHTML = event.target.value;
checkButtons();
}

function checkButtons() {
if (TextBox1.innerHTML === TextBox2.innerHTML) {
image.style.display = "block";
} else {
image.style.display = "none";
}
}

</script>

<!DOCTYPE html>
<html>
<head>
<style>
#A1, #A2, #B1, #B2 {
display: inline-block;
background-color: Green;
border-radius: 5px;
color: white;
cursor: pointer;
width: 50px;
padding: 6px 25px;
text-align: center;
margin: 5px;
}
#status-icons img {
width: 30px;
vertical-align: middle;
margin: 10px 5px;
display: none;
}
#TextBox1, #TextBox2 {
font-weight: bold;
margin: 5px;
min-height: 20px;
}
</style>
</head>
<body>
<div id="TextBox1"></div>
<div id="TextBox2"></div>
<!-- ✅ Correct and ❌ Wrong icons -->
<div id="status-icons">
<img id="correctIcon" src="https://cdn-icons-png.flaticon.com/512/845/845646.png" alt="Correct">
<img id="wrongIcon" src="https://cdn-icons-png.flaticon.com/512/753/753345.png" alt="Wrong">
</div>
<!-- Buttons -->
<button id="A1" value="0">A1</button>
<button id="A2" value="1">A2</button>
<button id="B1" value="0">B1</button>
<button id="B2" value="1">B2</button>
<script>
var FirstBtnArray = [A1, A2];
var SecondBtnArray = [B1, B2];
var lastClicked = null;
for (var i = 0; i < FirstBtnArray.length; i++) {
FirstBtnArray[i].addEventListener('click', FirstBtnArrayFunction);
}
for (var j = 0; j < SecondBtnArray.length; j++) {
SecondBtnArray[j].addEventListener('click', SecondBtnArrayFunction);
}
function FirstBtnArrayFunction(event) {
if (lastClicked === event.target) return; // prevent same button
lastClicked = event.target;
TextBox1.innerHTML = event.target.value;
checkButtons();
}
function SecondBtnArrayFunction(event) {
if (lastClicked === event.target) return; // prevent same button
lastClicked = event.target;
TextBox2.innerHTML = event.target.value;
checkButtons();
}
function checkButtons() {
var correctIcon = document.getElementById("correctIcon");
var wrongIcon = document.getElementById("wrongIcon");
if (TextBox1.innerHTML && TextBox2.innerHTML) {
if (TextBox1.innerHTML === TextBox2.innerHTML) {
correctIcon.style.display = "inline";
wrongIcon.style.display = "none";
} else {
correctIcon.style.display = "none";
wrongIcon.style.display = "inline";
}
// Reset state after 1 second
setTimeout(() => {
TextBox1.innerHTML = "";
TextBox2.innerHTML = "";
correctIcon.style.display = "none";
wrongIcon.style.display = "none";
lastClicked = null; // allow buttons again
}, 1000);
}
}
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------
WHEN TWO TEXT BOXES  FIND BUTTON EVENT TARGET ID SAME AND WE NEED 
BUTTON AND DIV TAG CODE IN HTML
-------------------------------------------------------------------------------------------------
<div id="TextBox1"></div>
<div id="TextBox2"></div>

<img src="https://via.placeholder.com/150" id="image" style="display: none;">

<button id="0" value="0">A1</button>
<button id="1" value="1">A2</button>

<div id="0" value="0">B1</div>
<div id="1" value="1">B2</div>

<script>
var buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", FirstBtnArrayFunction);
}
var divs = document.querySelectorAll("div");
for (var j = 0; j < divs.length; j++) {
divs[j].addEventListener("click", SecondBtnArrayFunction);
}
function FirstBtnArrayFunction() {
TextBox1.value = this.id;
checkButtons();
}
function SecondBtnArrayFunction() {
TextBox2.value = this.id;
checkButtons();
}
function checkButtons() {
if (TextBox1.value === TextBox2.value) {
image.style.display = "block";
} else {
image.style.display = "none";
}
}
</script>
-------------------------------------------------------------------------------------------------
WHEN ARRAY INDEX ARE SAME OR TEXT BOX INNER HTML SAME THEN SHOW IMAGE
AND ARRAY CHANGE INTO DOCUMENT QUERY SELECTOR ALL ARRAY USE
-------------------------------------------------------------------------------------------------
<div id="TextBox1">First button: </div>
<div id="TextBox2">Second button: </div>
<div id="score">Score: 0</div>

<img src="https://www.w3schools.com/tags/smiley.gif" id="image" style="display: none;">
<button id="restart">Restart Game</button>

<button id="A1" value="0">A1</button>
<button id="A2" value="1">A2</button>
<button id="B1" value="0">B1</button>
<button id="B2" value="1">B2</button>

<style>
button {
  background-color: green;
  color: white;
  padding: 10px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#restart {
  background-color: red;
  display: none;
}

#image {
  width: 50px;
  height: 50px;
}
</style>

<script>
let firstSelected = null;
let currentScore = 0;

function buttonClick(event) {
  // Don't process if clicking the same button twice
  if (firstSelected === event.target) return;
  
  // Show button value in text box
  if (firstSelected === null) {
    TextBox1.textContent = "First button: " + event.target.value;
    firstSelected = event.target;
    event.target.style.backgroundColor = "yellow";
  } else {
    TextBox2.textContent = "Second button: " + event.target.value;
    
    // Check for match
    if (firstSelected.value === event.target.value) {
      // Match found
      firstSelected.style.display = "none";
      event.target.style.display = "none";
      image.style.display = "block";
      currentScore++;
      score.textContent = "Score: " + currentScore;
    } else {
      // No match - reset after 1 second
      setTimeout(() => {
        firstSelected.style.backgroundColor = "green";
        event.target.style.backgroundColor = "green";
        TextBox1.textContent = "First button: ";
        TextBox2.textContent = "Second button: ";
      }, 1000);
    }
    
    // Reset for next turn
    firstSelected.style.backgroundColor = "green";
    firstSelected = null;
    
    // Show restart button if all matches found
    if (document.querySelectorAll('button:not([id="restart"]):not([style*="display: none"])').length === 0) {
      restart.style.display = "inline-block";
    }
  }
}

// Add click events to all game buttons
document.querySelectorAll('button:not(#restart)').forEach(button => {
  button.addEventListener('click', buttonClick);
});

// Restart game function
restart.addEventListener('click', function() {
  // Show all buttons
  document.querySelectorAll('button:not(#restart)').forEach(button => {
    button.style.display = "inline-block";
    button.style.backgroundColor = "green";
  });
  
  // Reset score
  currentScore = 0;
  score.textContent = "Score: 0";
  
  // Hide image and restart button
  image.style.display = "none";
  restart.style.display = "none";
  
  // Clear text boxes
  TextBox1.textContent = "First button: ";
  TextBox2.textContent = "Second button: ";
  
  // Reset selection
  firstSelected = null;
});
</script>

-------------------------------------------------------------------------------------------------
IF WE USE ONE ARRAY INDEX EQUAL TO SECOND ARRAY INDEX THEN WE WOULD BE  
CREATE 2 VARIABLES LIKE FBA AND SBA AND TOSE VARABLES EQUAL TO INDEX 
THIS ONE BY ONE
-------------------------------------------------------------------------------------------------
<img src="https://cdn-icons-png.flaticon.com/512/4436/4436481.png" id="image" style="display: none;width:50px;height:60px;">
<button id="A1">A</button>
<button id="A2">B</button>
<button id="B1">Apple</button>
<button id="B2">Ball</button>
<script type='text/javascript'>
//<![CDATA[
var FirstBtnArray=[A1,A2]
var FBA = FirstBtnArray.indexOf(this);
for (var i =0;i<FirstBtnArray.length; i++){
FirstBtnArray[i].onclick = function(){
FBA = FirstBtnArray.indexOf(this);
checkButtons();
}
}
var SecondBtnArray=[B1,B2]
var SBA = SecondBtnArray.indexOf(this);
for (var j =0;j<SecondBtnArray.length; j++){
SecondBtnArray[j].onclick = function(){
SBA = SecondBtnArray.indexOf(this);
checkButtons();
}
}
function checkButtons() {
if(FBA ==SBA) {
image.style.display = "block";
}
else {
image.style.display = "none";
}
}
//]]>
</script>
-------------------------------------------------------------------------------------------------
IF BUTTON IDS SAME THEN ALERT MATCH ELSE ALER NOT MATCH 
OR CHANGE FOREACH LOOP INTO FOR LOOP
for (var i = 0; i < document.querySelectorAll("button").length; i++) {
document.querySelectorAll("button")[i].addEventListener("click", handleClick);
}

var buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", handleClick);
}
-------------------------------------------------------------------------------------------------

<button id="button1">A</button>
<button id="button1">Apple</button>
<button id="button2">B</button>
<button id="button2">Ball</button>
<script>
var lastClickedId = null; 
function handleClick(event) {
var clickedId = event.target.id; 
if (clickedId === lastClickedId) {
alert("MATCH!");
} 
else {
alert("NOT MATCH!");
}
lastClickedId = clickedId; 
}
var buttons = document.querySelectorAll("button");
buttons.forEach(function(button) {
button.addEventListener("click", handleClick);
});
</script>
-------------------------------------------------------------------------------------------------
<button id="A1">A1</button>
<button id="A1">A2</button>
<button id="B1">B1</button>
<button id="B1">B2</button>
<script>
// Get button elements
var buttons = document.querySelectorAll('button');
// Add event listeners to buttons
buttons.forEach(function(button) {
button.addEventListener('click', function() {
handleClick(this.id);
});
});
function handleClick(id) {
var prevClickedBtnId = sessionStorage.getItem('prevClickedBtnId');
var message;
if (prevClickedBtnId === id) {
message = 'Your clicked ID is the same: ' + id;
} 
else {
message = 'Your clicked ID is not the same: ' + id;
}
// Store the current clicked button ID for future comparison
sessionStorage.setItem('prevClickedBtnId', id);
// Show alert with message
alert(message);
}
</script>
-------------------------------------------------------------------------------------------------
Other Code Only Use One Null Variable 
-------------------------------------------------------------------------------------------------
<html>

<body>

<!-- Big buttons -->

<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">A</button>

<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">A</button>

<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">B</button>

<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">B</button>


<p id="result" style="font-size:20px;"></p>


<script>

let clickedId1 = null;

let result = document.querySelector("#result");

function handleClick(event) {

  if (event.target === clickedId1) return;

  if (clickedId1 == null) {

    clickedId1 = event.target;

    clickedId1.style.background = "yellow";

    result.textContent = "";

  } else {

    if (clickedId1.textContent === event.target.textContent) {

      result.textContent = "Match!";

      clickedId1.disabled = true;

      event.target.disabled = true;

    } else {

      result.textContent = "Try Again!";

    }

    // Reset background

    clickedId1.style.background = "";

    event.target.style.background = "";

    // Clear selection

    clickedId1 = null;

  }

}

</script>

</body>

</html>
-------------------------------------------------------------------------------------------------






Posted by on Saturday, 23 March 2024 at 09:58
Labels: , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets