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>
-------------------------------------------------------------------------------------------------
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>

-------------------------------------------------------------------------------------------------
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"></div>
<div id="TextBox2"></div>

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

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

<button id="B1">B1</button>
<button id="B2">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 < document.querySelectorAll('div').length; i++) {
document.querySelectorAll('div')[i].addEventListener('click', FirstBtnArrayFunction);
function FirstBtnArrayFunction(event){
TextBox1.innerHTML= FirstBtnArray.indexOf(this);
checkButtons();
}
}

var SecondBtnArray=[B1,B2]
for (var j = 0; j < document.querySelectorAll('button').length; j++) {
document.querySelectorAll('button')[j].addEventListener('click',SecondBtnArrayFunction);
function SecondBtnArrayFunction(event){
TextBox2.innerHTML= SecondBtnArray.indexOf(this);
checkButtons();
}
}

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

</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://via.placeholder.com/150" id="image" style="display: none;">
<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>
-------------------------------------------------------------------------------------------------




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