Saturday, 23 March 2024
When 2 Buttons Clicked True Then Show Image ✅✅✅


---------------------------------------------------------------------------------------------------------------
<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; 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"; } else { image.style.display = "none"; } } </script> </body> </html>
-------------------------------------------------------------------------------------------------
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;
}
}
-------------------------------------------------------------------------------------------------
<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>
-------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment