Monday, 20 August 2018

JS FUNCTION



---------------------------------------------------------------------------------------------------------------
JS FUNCTION
READ MORE:
http://fbgadgets.blogspot.com/2017/07/quiz-script.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<button id="HtmlId">AddEventListener</button>
<script>
$("#HtmlId").click(function(){
alert(this.id);
});
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert(this.id);
});
});
</script>
</body>
--------------------------------------------------------------------------------------------------------------
<style>
.CssColorClass{
background-color:Gold;
color:DarkGreen;
}
</style>
<button id="HtmlId"onClick="FunctionName()">AddEventListener</button>
<script>
HtmlId.onclick=function(){
HtmlId.classList.add("CssColorClass");
}
</script>
--------------------------------------------------------------------------------------------------------------
<button id="Btn1">BUTTON1</button>
<button id="Btn2">BUTTON2</button>
<style>
.CssColorClass{
background-color:Gold;
color:DarkGreen;
}
</style>
<script>
var ButtonIdArray=["Btn1","Btn2"];
for (var i =0;i<ButtonIdArray.length; i++){
document.getElementById(ButtonIdArray[i]).classList.add("CssColorClass");
}
</script>
--------------------------------------------------------------------------------------------------------------
HTML CLASS AND ID TRACE
we write  document ready line $(document).ready(function(){
change below code $(function () {
<script>
$(function () {
$("#HtmlId").draggable({
revert: "invalid"
});
});
</script>
-------------------------------------------------------------------------------------------------------------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<button class="HtmlClass">AddEventListener</button>
<div id="HtmlId">ButonRunWithSelectors</div>
<script>
$(".HtmlClass").click(function() {
var txtClass = $(this).attr("class");
alert("Class Name : "+txtClass);
});
$("div").click(function(){
$(this).hide();
alert(this.id);
});
</script>
</body>
-------------------------------------------------------------------------------------------------------------
<body>
<div style="float:left; ">
<img id="HtmlId" src="" style="width:100px;height:100px;">
<button onclick="HtmlId.src='smiley.gif' "style="width:100px;height:100px;">button</button>
</div>
</body>
------------------------------------------------------------------------
CLICK SCREEN AND BUTTON MOVE TO CLICK POSSSITION
--------------------------------------------------------------------------
<!-- https://stackoverflow.com/questions/28267256/how-to-move-an-element-to-the-mouse-position -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(this).on("click", function(e) {
revert: "invalid"
var x = e.pageX;
var y = e.pageY;
var el = $("#HtmlId");
el.css('position', 'absolute');
el.css("left", x);
el.css("top", y);
})
});
</script>
<div id="HtmlId">AddEventListener</div>
--------------------------------------------------------------------------
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#HtmlId").draggable({
revert: "invalid"
});
});
</script>
<div id="HtmlId">AddEventListener</div>

or use this code
//<script>
$(function () {
$("#HtmlId").draggable({
revert: "invalid"
});
});
</script>
-------------------------------------------------------------------------------
<button class="BtnClass" onclick="buttonClicked(this)">Button 1</button>
<button class="BtnClass" onclick="buttonClicked(this)">Button 2</button>
<button class="BtnClass" onclick="buttonClicked(this)">Button 3</button>
<script>
function buttonClicked(button) {
// `button` is the clicked button element
button.style.background = 'red'; // change color
alert("You clicked: " + button.innerText); // show alert
}
</script>

<div id="TextBox1"></div>
<button id="Btn1" onclick="handleClick(event)">#1</button>
<button id="Btn1" onclick="handleClick(event)">#2</button>
<script>
function handleClick(event) {
TextBox1.innerHTML += event.target.id;
//An Other Way TextBox1.textContent += event.target.id;
}
</script>

<div id="TextBox1"></div>
<button id="Btn1" onclick="handleClick()">#1</button>
<button id="Btn1" onclick="handleClick()">#2</button>
<script>
function handleClick() {
TextBox1.textContent += event.target.id;
}
</script>

<input id="TextBox1"></input>
<button id="Btn1" onclick="handleClick(event)">#1</button>
<button id="Btn1" onclick="handleClick(event)">#2</button>
<script>
function handleClick(event) {
TextBox1.value += event.target.id;
}
</script>

<input id="TextBox1"/>
<button id="Btn1" onclick="handleClick(this)">#1</button>
<button id="Btn1" onclick="handleClick(this)">#2</button>
<script>
function handleClick(FbGadgets) {
TextBox1.value += FbGadgets.id;
}
</script>
---------------------------------------------------------------------------------------------------------------

<button id="HtmlId"onClick="FunctionName()">AddEventListener</button>

<script>

function FunctionName(){
alert("HELLO");
}

HtmlId.addEventListener("click",FunctionName,true);
function FunctionName(){
alert("HELLO");
}

HtmlId.addEventListener("click",function(){
alert("HELLO");
});

HtmlId.onclick=("click",FunctionName);
function FunctionName(){
alert("HELLO");
}

HtmlId.onclick=(FunctionName);
function FunctionName(){
alert("HELLO");
}

HtmlId.onclick=function(){
alert("HELLO");
}

​$("#HtmlId").click(function(){
alert(this.id);
});

​$(".HtmlClass").click(function(){
alert("HELLO");
});


HtmlId.onmouseover=function(){
alert("HELLO");
}
HtmlId.onmouseout=function(){
alert("HELLO");
}

// OR USE THIS JAVA SCRIPT FUNCTION WITHOUT NAME
HtmlId.addEventListener("click", function(){
alert("HELLO");
}
);

var fruits = ["Banana","Orange", "Apple", "Mango"];
fruits.sort(FunctionName,true);
function FunctionName(){
return .5 - Math.random()
};
document.write(fruits);

// OR USE THIS JAVA SCRIPT FUNCTION WITHOUT NAME
var fruits = ["Banana","Orange", "Apple", "Mango"];
fruits.sort(function() {
return .5 - Math.random()
});
document.write(fruits);

//SIMPLE FUNCTION

FunctionName = function FunctionName(){
document.write("SAY HELLO");
};
FunctionName();

function FunctionName(){
var x = "SAY HELLO";
document.write(x);
};
FunctionName();

//FUNCTION WITH EQUAL SIGN
var x = "SAY HELLO";
FunctionName = function(x){
return x;
};
document.write(FunctionName(x));

//FUNCTION WITHOUT EQUAL SIGN
var x = "SAY HELLO";
function FunctionName(x){
return x;
}
document.write(FunctionName(x));

//WHEN VARIABLE UNDER FUNCTION
FunctionName = function(){
var x = "SAY HELLO";
return x;
};
document.write(FunctionName());
</script>
---------------------------------------------------------------------------------------------------------------
JAVA SCRIPT SELF INVOKING FUNCTION TYPE
ReadMore
https://www.w3schools.com/js/js_function_definition.asp
---------------------------------------------------------------------------------------------------------------
(function () {
var x = "This Is A Self Invoking Function"; 
// I will invoke myself
})();
---------------------------------------------------------------------------------------------------------------
JS FUNCTION
---------------------------------------------------------------------------------------------------------------
<img src="" id="ImageId" >
<script>
//https://www.w3schools.com/jsref/prop_style_border.asp
ImageId.src= "smiley.gif";
ImageId.style.background = "red";
ImageId.style.border = "thick solid #0000FF";
</script>
---------------------------------------------------------------------------------------------------------------
<input type="checkbox" id="checkboxId" name="checkbox" />
<img id="ImageSrcId" src="https://img.tfd.com/wn/07/62305-car.jpg">
<script>
checkboxId.addEventListener('change',function(){
if (checkboxId.checked) {
ImageSrcId.src =["https://img.tfd.com/wn/C7/68FC0-girl.png"];
} 
else {
ImageSrcId.src =["https://img.tfd.com/wn/01/692D2-boy.png"];
}
});
</script>
 ----------------------------------------------------------------------------------------------------------------------------------------------
<button id="HtmlId"onClick="FunctionName()">AddEventListener</button>
<img id="ImageSrcId" src="">
<script>
HtmlId.addEventListener('click',function(){
HtmlId.innerHTML="🙄";
alert("HELLO");
ImageSrcId.src =["smiley.gif"];
});
</script>
---------------------------------------------------------------------------
<input type="checkbox" id="checkboxId" name="checkbox" />
<div id="HtmlId">🚗</div>
<script>
checkboxId.addEventListener('change',function(){
if (checkboxId.checked) {
HtmlId.innerHTML="🙄";
alert("HELLO");
} 
else {
HtmlId.innerHTML="🥩";
}
});
</script>

we change button selector handle<button> change into input <input>
we add type="button" we can write else if into else
else{
HtmlButtonId.value="NO";}
}

<input type="button" id="HtmlButtonId" value="NO"  />
<script type="text/javascript">
HtmlButtonId.onclick=function(){
if(HtmlButtonId.value=="NO"){
HtmlButtonId.value="YES";}
else if(HtmlButtonId.value=="YES"){
HtmlButtonId.value="NO";}
}
</script>
-----------------------------------------------------------------------------------------------------------
ADD DIV TAG IN JS FUNCTION

<div></div>
<script>
let div = document.createElement('div');
div.innerHTML = "<div>hi😀!</div>";
document.body.append(div);
</script>

<div></div>
<script>
document.body.appendChild(document.createElement('div')
).innerHTML = "<div>hi😀!</div>";
</script>
-----------------------------------------------------------------------------------------------------------
<div id="DivId"></div>

<script>
DivId.innerHTML = "<div>hi😀!</div>";
</script>

<script>
document.write('<div style="float:left;margin-right:10px;text-align:center;border:5px solid Red;">BLUE</div>');
</script>

<img>
<script>
document.body.appendChild(document.createElement("img"))
.src =["https://www.w3schools.com/tags/smiley.gif"];
;
</script>
-----------------------------------------------------------------------------
OR CHANGE JAVA SCRIPT HTML CODE INTO SIMPLE HTML
READ MORE:
-----------------------------------------------------------------------------------------------------------
TIME OUT FUNCTION CAN BE WRITE AS A SIMPLE WAY
-----------------------------------------------------------------------------------------------------------
function setTimeout(){
firstClickedTile = undefined;
}
setTimeout(400);
-----------------------------------------------------------------------------------------------------------
TIME OUT FUNCTION CAN BE WRITE AS ANONYMOUS WAY
-----------------------------------------------------------------------------------------------------------
setTimeout(function(){
firstClickedTile = undefined;
}, 400);
------------------------------------------------------------------------------------------------------------
ALERT HELLO AFTER 3 SECOND
-------------------------------------------------------------------------------------------------------------
//ASYNCHRONOUS FUNCTION
setTimeout(() => {
alert("HI");
}, 3000);
// ASYNCHRONOUS FUNCTION TO ANONYMOUS FUNCTION
setTimeout(function() {
alert("HI");
}, 3000);
// ANONYMOUS FUNCTION TO SIMPLE FUNCTION
function FunctionName(){
alert("HI");
}
setTimeout(FunctionName, 3000);
---------------------------------------------------------------------------------------------------------------
ASYNCHRONOUS OR ARROW FUNCTION IN JAVA SCRIPT
---------------------------------------------------------------------------------------------------------------
READ MORE:
https://eloquentjavascript.net/11_async.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://javascript.info/async-await
https://www.sitepoint.com/jquery-settimeout-function-examples/
---------------------------------------------------------------------------------------------------------------
setTimeout(() => {
firstClickedTile = undefined;
}, 400);
---------------------------------------------------------------------------------------------------------------
WHEN BUTTON ID SAME WE NEED QUERY SELCTOR LISTENER ARRAY
IN THIS EXAMPLE buttons are HTML QUERY SELCTOR OR HTML TAG NAME SELCTOR
WE CAN CHANGE 
document.querySelectorAll  INTO document.getElementsByTagName
or
document.querySelectorAll("#Btn1")

document.querySelectorAll("button").length

1❤) or ("button").length 

2💕) or i < 2

Read More:
http://fbgadgets.blogspot.com/2017/09/flash-code-change-into-javascript.html
https://stackoverflow.com/questions/51215161/how-to-select-all-buttons-with-foreach-in-js-dom-no-jquery
---------------------------------------------------------------------------------------------------------------
<input id="TextBox1">
<button id="Btn1">#1</button>
<button id="Btn1">#2</button>
<script>
for(var i = 0; i < document.querySelectorAll("button").length; i++) {
document.querySelectorAll("button")[i].addEventListener("click",expandInfo,true);
function expandInfo(){
TextBox1.value +=this.id;
}
}
</script>
----------------------------------------------------------------------------------
WE CREATE FLAGS VARIABLE LISTNER FOR ARRAY WHEN BUTTONS HAVE SAME OR DIFFRENT CLASS
---------------------------------------------------------------------------------
<div id="TextBox1"></div>
<button class="BtnClass">Japan</button>
<button class="BtnClass">Japan</button>
<button class="BtnClass">Sweden</button>
<button class="BtnClass">Sweden</button>

<script type="text/javascript">
var flags = document.querySelectorAll('.BtnClass');
for (var i = 0; i < flags.length; i++) {
flags[i].addEventListener('click', pickFlag);
}
function pickFlag(event){
TextBox1.innerHTML+=event.target.className 
}


<div id="TextBox1"></div>
<button class="BtnClass A">Japan</button>
<button class="BtnClass A">Japan</button>
<button class="BtnClass B">Sweden</button>
<button class="BtnClass B">Sweden</button>

<script type="text/javascript">
var flags = document.querySelectorAll('.BtnClass');
for (var i = 0; i < flags.length; i++) {
flags[i].addEventListener('click', pickFlag);
}
function pickFlag(event){
TextBox1.innerHTML+=  event.target.className 
}
</script>

only type A B 

<button class="BtnClass A1" style="height: 40px; width: 80px;">A1</button>
<button class="BtnClass 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.getElementsByClassName('BtnClass');
for (var i = 0; i < 2; i++) {
BtnArray[i].onclick = function() {
TextBox1.textContent += event.target.className.split(' ')[1];
};
}
</script>

<div id="TextBox1"></div>
<button class="BtnClass A">Japan</button>
<button class="BtnClass A">Japan</button>
<button class="BtnClass B">Sweden</button>
<button class="BtnClass B">Sweden</button>
<script type="text/javascript">
var BtnArray = document.getElementsByClassName('BtnClass');
for (var i = 0; i < BtnArray.length; i++) {
BtnArray[i].addEventListener('click', pickFlag);
}

function pickFlag(event){
TextBox1.innerHTML += event.target.className;
}
</script>

<!-- https://fbgadgets.blogspot.com/2018/12/input-button-value-swap.html --> 
<div id="TextBox1"></div>
<button class="BtnClass">Japan</button>
<button class="BtnClass">Japan</button>
<button class="BtnClass">Sweden</button>
<button class="BtnClass">Sweden</button>
<script type="text/javascript">
var flags = document.querySelectorAll('.BtnClass');
for(var i = 0; i < flags.length; i++) {
flags[i].addEventListener('click', pickFlag);
}
function pickFlag(event) {
TextBox1.innerHTML += event.target.innerHTML
}
</script>
-----------------------------------
If we need to trace only A and B
var BtnClass = event.target.classList.contains('A') ? 'A' : 'B';
TextBox1.innerHTML += BtnClass + "<br>"
--------------------------------------------
CREATE FLAGS VARIABLE LISTNER FOR ARRAY WHEN BUTTONS HAVE SAME IDS
OR USE REMOVE VARIABLE

for (var i = 0; i < document.querySelectorAll('#Btn1').length; i++) {
document.querySelectorAll('#Btn1')[i].addEventListener('click', pickFlag);
}
------------------------------------------------------------------------------
<div id="TextBox1"></div>
<button id="Btn1" class="BtnClass">#1</button>
<button id="Btn1" class="BtnClass">#2</button>
<script type="text/javascript">
var flags = document.querySelectorAll('#Btn1');
for(var i = 0; i < flags.length; i++) {
flags[i].addEventListener('click', pickFlag);
}
function pickFlag(event) {
TextBox1.innerHTML += event.target.innerHTML
}
</script>

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


--------------------------------------------
WE DON'T NEED ANY VARIABLE AND ARRAY LIST  WHEN BUTTONS HAVE SAME IDS
USE THIS SHORT CODE
for (var i = 0; i < document.querySelectorAll('.BtnClass').length; i++) {
document.querySelectorAll('.BtnClass')[i].addEventListener('click', pickFlag);
}
----------------------------------------------------------------------------
<div id="TextBox1"></div>
<button id="Btn1" class="BtnClass">#1</button>
<button id="Btn1" class="BtnClass">#2</button>
<script type="text/javascript">
for(var i = 0; i < Btn1.length; i++) {
Btn1[i].addEventListener('click', pickFlag);
}
function pickFlag(event) {
TextBox1.innerHTML += event.target.innerHTML
}
</script>

<div id="TextBox1"></div>
<button id="Btn1" class="BtnClass">A</button>
<button id="Btn1" class="BtnClass">Apple</button>
<script type="text/javascript">
for(var i = 0; i < Btn1.length; i++) {
Btn1[i].addEventListener('click', pickFlag);
function pickFlag(event) {
var clickedId = event.target.id;
TextBox1.innerHTML += clickedId;
}
}
</script>

<div id="TextBox1"></div>
<button id="Btn1" class="BtnClass">A</button>
<button id="Btn1" class="BtnClass">Apple</button>
<script type="text/javascript">
for(var i = 0; i < Btn1.length; i++) {
Btn1[i].onclick = function() {
var clickedId = event.target.id;
TextBox1.innerHTML += clickedId;
}
}
</script>
----------------------------------------------------------------------------
use html and java script code button clicked one by one and  find button id if button id same in message then both buttons remove else button visible
----------------------------------------------------------------------------

<title>Remove Matching Buttons</title>
<button id="Btn1">A</button>
<button id="Btn1">a</button>
<button id="Btn2">B</button>
<button id="Btn2">b</button>
<script>
var lastClickedId = null;
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', () => {
var currentButtonId = button.id;
if (lastClickedId == currentButtonId) {
alert(lastClickedId);
document.querySelectorAll(`[id="${currentButtonId}"]`).forEach(btn => btn.remove());
} 
else {
lastClickedId = currentButtonId;
}
});
});
</script>
----------------------------------------------------------------------------
<button id="btn1">A</button>
<button id="btn1">a</button>
<button id="btn2">B</button>
<button id="btn2">b</button>

<script>
var lastClickedId = null;

document.querySelectorAll('button').forEach(function(button) {
button.addEventListener('click', function() {

var currentButtonId = button.id;

if (lastClickedId == currentButtonId) {
alert(lastClickedId);

document.querySelectorAll(`[id="${currentButtonId}"]`).forEach(function(btn) {
btn.remove();
});

} 

else {
lastClickedId = currentButtonId;
}

});
});
</script>
----------------------------------------------------------------------------
Please simplify this below code line
or use this code
var matchingButtons = document.querySelectorAll(`[id="${currentButtonId}"]`);

or use this code
var matchingButtons = document.querySelectorAll('[id="' + currentButtonId + '"]');
or use this code
var matchingButtons = document.querySelectorAll(`#${currentButtonId}`);
or use this code
buttons[i].onclick = function() {
or use this code
var buttons = document.getElementsByTagName('button');
----------------------------------------------------------------------------

<button id="btn1">A</button>
<button id="btn1">a</button>
<button id="btn2">B</button>
<button id="btn2">b</button>

<script>
var lastClickedId = null;

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

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

buttons[i].addEventListener('click', function() {

var currentButtonId = this.id;

if (lastClickedId == currentButtonId) {
alert(lastClickedId);

var matchingButtons = document.querySelectorAll(`[id="${currentButtonId}"]`);

for (var j = 0; j < matchingButtons.length; j++) {
matchingButtons[j].remove();
}

} 

else {
lastClickedId = currentButtonId;
}

});

}
</script>
----------------------------------------------------------------------------
<button id="Btn1">A</button>
<button id="Btn1">Apple</button>
<button id="Btn2">B</button>
<button id="Btn2">Ball</button>


<script>
var lastClickedId = null;
var buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', () => {
var currentButtonId = buttons[i].id;

if (lastClickedId === currentButtonId) {
alert(lastClickedId);
var matchingButtons = document.querySelectorAll(`[id="${currentButtonId}"]`);
for (let j = 0; j < matchingButtons.length; j++) {
matchingButtons[j].remove();
}
} 
else {
lastClickedId = currentButtonId;
}

});
}
</script>


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

----------------------------------------------------------------------------------
FOR EACH FUNCTION FOR BUTTON
https://stackoverflow.com/questions/51215161/how-to-select-all-buttons-with-foreach-in-js-dom-no-jquery
----------------------------------------------------------------------------------
<button id="Btn1" class="BtnClass">#1</button>
<button id="Btn1" class="BtnClass">#2</button>
<input id="TextBox1">
<script>
document.querySelectorAll(".BtnClass").forEach(function(ForEachFunction) {
ForEachFunction.addEventListener("click",FunctionName,true);
function FunctionName(){
TextBox1.value +=this.id;
}  
});
</script>

-----------------------------------------------------------------------------------------------------------
READ MORE:
https://stackoverflow.com/questions/21700364/adding-click-event-listener-to-elements-with-the-same-class
---------------------------------------------------------------------------------------------------------
<button id="Btn1" class="BtnClass">#1</button>
<button id="Btn1" class="BtnClass">#2</button>
<input id="TextBox1">
<script>
document.querySelectorAll(".BtnClass").forEach(ForEachFunction => {
ForEachFunction.addEventListener("click",FunctionName,true);
function FunctionName(){
TextBox1.value +=this.id;
}
});
</script>
-------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------
We can change function equal() { INTO window.onmouseover=function(){
AND CHANGE P TAG LINE INTO BUTTON
<button type="text" id="result"></button>
------------------------------------------------------------------------------------------------------<!-- https://codepen.io/SaddamAkbar/pen/xxgdoRZ -->
<input type="button" id="ButtonId1" value="NO"  />
<p>First Input: <input type="text" name="text" id="firstvalue" value=""></p>
<script type="text/javascript">
firstvalue.value ="";
ButtonId1.onclick=function(){
firstvalue.value =this.value;
if(ButtonId1.value=="NO"){
ButtonId1.value="YES";}
else if(ButtonId1.value=="YES"){
ButtonId1.value="NO";}
}
</script>
<input type="button" id="ButtonId2" value="NO"  />
<p>Second Input: <input type="text" name="text" id="secondvalue"></p>
<script type="text/javascript">
secondvalue.value ="";
ButtonId2.onclick=function(){
secondvalue.value =this.value;
if(ButtonId2.value=="NO"){
ButtonId2.value="YES";}
else if(ButtonId2.value=="YES"){
ButtonId2.value="NO";}
}
</script>
<br>

<p type="text" id="result"></p>
<button onclick="equal()">Submit</button>
<script type="text/javascript">
function equal() {
if (firstvalue.value === secondvalue.value) {
result.innerHTML = "Correct";
} 
else {
result.innerHTML = "Incorrect";
}
}
</script>
--------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
WE ALSO  WRITE  THIS LINE 
for(var i = 0; i < 2; i++){ 
OR
for(var i = 0; i < ButtonIdArray.length; i++)
WE ALSO  WRITE  THIS LINE IN TO UNDER FOR LOOP LINE
ButtonIdArray[i].addEventListener("click",ButtonFunctionName,true);

ButtonIdArray[i].onclick=function(){
TextBox1.innerHTML+=event.target.id
}
---------------------------------------------------------------------------------------------------------------
<div id="TextBox1"></div>
<button id="Btn1">BUTTON1</button>
<button id="Btn2">BUTTON2</button>
<script>
var ButtonIdArray = [Btn1,Btn2];
for(var i = 0; i < 2; i++){ 
ButtonIdArray[i].addEventListener("click",ButtonFunctionName,true);
}
function ButtonFunctionName(event){
TextBox1.innerHTML+=event.target.id
}
</script>
---------------------------------------------------------------------------------------------------------------
Read More:
https://fbgadgets.blogspot.com/2017/08/remove-matching-id-in-javascript.html
//WE USE NUMBER 2 BECUASE ARRAY HAS 2 ITEMS AND i IS LESSER THAN 2
---------------------------------------------------------------------------------------------------------------
<div id="TextBox1">
<button id="Btn1">BUTTON1</button>
<button id="Btn2">BUTTON2</button>
</div>
<script>
var ButtonIdArray=["Btn1","Btn2"];
//WE USE NUMBER 2 BECUASE ARRAY HAS 2 ITEMS AND i IS LESSER THAN 2
for(var i = 0; i < 2; i++){
TextBox1.addEventListener("click",ButtonFunctionName,true);
}
function ButtonFunctionName(event){
TextBox1.innerHTML+=event.target.id
}
</script>

---------------------------------------------------------------------------------------------------------------
WE CLICK BUTTON IT WORKS  OUT PUT Btn1Btn1Btn1
IF I USE Btn1.onclick=function(){ 
 OUT PUT Btn1 NOT  SHOW Btn1Btn1Btn1
BUT IT WORKS WITH SOME CHANGES IN HTML

<button id="Btn1"> BUTTON1
<div id="TextBox1"></div>
</button>
<script>
Btn1.onclick=function(){
TextBox1.innerHTML+=event.target.id
}
</script>
---------------------------------------------------------------------------------------------------------------
<div id="TextBox1">
<button id="Btn1">BUTTON1</button>
</div>
<script>
TextBox1.onclick=function(){
TextBox1.innerHTML+=event.target.id
}
</script>
-------------------------------------------------------------------------------------------------
We Also use this Code
WITHOUT BUTTON STRING ARRAY IN THIS CASE NO NEED BUTTONS DIV TAGS
UNDER TEXT BOX 1 DIV TAG
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
-------------------------------------------------------------------------------------------------
<div id="TextBox1"></div>
<button id="Btn1">BUTTON1</button>
<button id="Btn2">BUTTON2</button>
<script type='text/javascript'>
var ButtonIdArray=[Btn1,Btn2];
for (var i =0;i<ButtonIdArray.length; i++){
ButtonIdArray[i].style.backgroundColor = "LightGreen";
ButtonIdArray[i].onclick = function(){
TextBox1.innerHTML= ButtonIdArray.indexOf(this)+ " " + event.target.id
}
}
</script>
-------------------------------------------------------------------------------------------------
ARRAY  ITEM CHANGE COLOR
read More:
https://stackoverflow.com/questions/26939309/how-to-change-bgcolor-of-each-item-in-array-with-javascript
-------------------------------------------------------------------------------------------------
<button id="Btn1">BUTTON1</button>
<button id="Btn2">BUTTON2</button>
<script>
var ButtonIdArray=["Btn1","Btn2"];
for (var i =0;i<ButtonIdArray.length; i++){
document.getElementById(ButtonIdArray[i]).style.backgroundColor = "LightGreen";
}
</script>
--------------------------------------------------------------------------------------------------------------
BUTTON ARRAY  WITHOUT LOOP LINE  WE CAN  REMOVE ALSO
ARRAY LINE var ButtonIdArray=["Btn1","Btn2"];
--------------------------------------------------------------------------------------------------------------
<div id="TextBox1">
<button id="Btn1">BUTTON1</button>
<button id="Btn2">BUTTON2</button>
</div>
<script>
var ButtonIdArray=["Btn1","Btn2"];
TextBox1.onclick=function(){
TextBox1.innerHTML+=event.target.id
}
</script>
--------------------------------------------------------------------------------------------------------------









































Posted by

 on Monday, 20 August 2018

at
14:06











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