Saturday 19 August 2017

GET BUTTON ID AFTER CLICK IN JAVA SCRIPT

GET BUTTON ID AFTER CLICK IN JAVA SCRIPT


-------------------------------------------------------------------------------------------------------------
GET BUTTON ID AFTER CLICK IN JAVA SCRIPT
--------------------------------------------------------------------------------------------------------------
<body>
<!-- http://jsfiddle.net/R77EB/ -->
<!-- https://www.google.co.uk/search?q=if+button+is+same+then+in+javascript -->
<!-- https://stackoverflow.com/questions/27731812/simple-if-else-onclick-then-do -->
<!-- https://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button -->
<button id="1" onClick="reply_click(this.id)">B1</button>
<button id="2" onClick="reply_click(this.id)">B2</button>
<button id="3" onClick="reply_click(this.id)">B3</button>
<script type="text/javascript">
function reply_click(clicked_id){
alert(clicked_id);
}
</script>
</body>
 --------------------------------------------------------------------------------------------------------------
BUTTON COUNTER SHOW IMAGE IN JAVA SCRIPT
----------------------------------------------------------------------------------------------------------------
<button id="Btn1">Button</button>
<p id="demo"></p>
<script>
var ZERO = 0;
document.getElementById("demo").innerHTML = ZERO;
var Btn1 = document.getElementById("Btn1");
Btn1.onclick = function(){
ZERO++;// OR USE THIS ZERO = ZERO + 1
if(ZERO > 10){
document.getElementById('Btn1').style.backgroundColor = "Green";
document.getElementById("Btn1").style.backgroundImage = "url('https://3.bp.blogspot.com/-UJcqK5kEhU0/VrNi4BMbzGI/AAAAAAABZ_k/qHTsHbZffec/s1600/Fangs.jpg')";
document.getElementById("Btn1").style.width = "100px";
document.getElementById("Btn1").style.height = "100px";
document.getElementById('Btn1').style.borderColor = "red";
document.getElementById('Btn1').style.borderWidth = "5px";
document.getElementById('IMAGE').style.visibility='visible';
ZERO = 0;//OR USE THIS document.getElementById("demo").innerHTML = 0;
}
else{
document.getElementById('Btn1').style.backgroundColor = "";
document.getElementById("Btn1").style.backgroundImage = "url('')";
document.getElementById("Btn1").style.width = "";
document.getElementById("Btn1").style.height = "";
document.getElementById('Btn1').style.borderColor = "";
document.getElementById('Btn1').style.borderWidth = "";
document.getElementById('IMAGE').style.visibility='hidden';;
}
document.getElementById("demo").innerHTML = ZERO;
}
</script>
<style>
#IMAGE{visibility:hidden;float:left;}
</style>
<img src ="https://1.bp.blogspot.com/-5ZHJRzZjm5g/WVI_ITV73lI/AAAAAAABc5g/oWmQGkCmwlcma19mSlM_LI1ebqnwnd1OACLcBGAs/s1600/image6.gif" id="IMAGE">

---------------------------------------------------------------------------------------------------------------
AS2 BUTTON USE CSS CODE  IN JAVA SCRIPT
---------------------------------------------------------------------------------------------------------------
<style>
#AS2{
position:absolute;
border:solid;
outline:solid;
font:bold;
}
</style>
<button id="AS2" name="ButtonName" value="1"> A</button>
<div id="DivId1"></div>
<div id="DivId2"></div>
<div id="DivId3"></div>
<div id="DivId4"></div>
<script>
var ZERO = 0 ;
AS2.onclick = function(){
ZERO +=10;
this.style.backgroundColor="Yellow";
this.style.borderColor="Red";
this.style.borderWidth="3px";
this.style.outlineColor="Blue";
this.style.outlineWidth="3px";
this.style.backgroundImage="url('https://www.w3schools.com/tags/smiley.gif')";
this.style.color="DarkOrange";
this.style.font="bold 25px Algerian,sans-serif";
this.style.fontWeight = "900";
this.style.textAlign="center";
this.style.height="42px";
this.style.width="42px";
this.style.opacity=0.7;
this.style.left=ZERO;
DivId1.innerHTML="id="+this.id;
DivId3.innerHTML="name="+this.name;
DivId4.innerHTML="value="+this.value;
DivId2.innerHTML="ThisIsEnclosedHtmlPart="+this.innerHTML;
};
</script>
 ----------------------------------------------------------------------------------------------------------------
HOW TO VARIABLE EQUAL WITH BUTTON AND SHOW ALERT BOX
 ----------------------------------------------------------------------------------------------------------------
<html>
<body>
<button id="Btn1">Button1</button>
<button id="Btn2">Button2</button>
<script>
var var1 = 1;
document.getElementById("Btn1").innerHTML = var1;
//Btn1 VARIABLE EAUAL TO ZERO
Btn1.onclick = function(){
var1 = 0;
document.getElementById("Btn1").innerHTML = var1;
myFunction();
}
var var2 = 2;
document.getElementById("Btn2").innerHTML = var2;
//Btn2 VARIABLE EAUAL TO ZERO
Btn2.onclick = function(){
var2 = 0;
document.getElementById("Btn2").innerHTML = var2;
myFunction();
}
//WHEN BOTH VARIABLE EAUAL TO ZERO THEN SHOW ALERT BOX
function myFunction() {
if(var1 == var2){
alert(" VARIABLE1 EQUAL TO VARIABLE2 ")
document.getElementById('Btn1').style.backgroundColor = "Green";
document.getElementById('Btn2').style.backgroundColor = "Green";
}
}
</script>
</body>
</html>
<html>
<body>
<button id="Btn1">Button1</button>
<button id="Btn2">Button2</button>
<script>
var var1 = 1;
document.getElementById("Btn1").innerHTML = var1;
//Btn1 VARIABLE EAUAL TO ZERO
Btn1.onclick = function(){
var1 = 0;
document.getElementById("Btn1").innerHTML = var1;
myFunction();
}
var var2 = 2;
document.getElementById("Btn2").innerHTML = var2;
//Btn2 VARIABLE EAUAL TO ZERO
Btn2.onclick = function(){
var2 = 0;
document.getElementById("Btn2").innerHTML = var2;
myFunction();
}
//WHEN BOTH VARIABLE EAUAL TO ZERO THEN SHOW ALERT BOX
function myFunction() {
if(var1 == var2){
alert(" VARIABLE1 EQUAL TO VARIABLE2 ")
document.getElementById('Btn1').style.backgroundColor = "Green";
document.getElementById('Btn2').style.backgroundColor = "Green";
}
}
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
TRACE BUTTON ID NAME VALUE INDEX IN JAVASCRIPT
OR REPLACE LINE
btnArray[i].addEventListener("click",Fn1,true);

function Fn1(){
OR USE THIS LINE
btnArray[i].onclick=function(){
-------------------------------------------------------------------------------------------------------------------
<div id="TextBox1"></div>
<button id="Btn1" name="ButtonName1" value="1">#1</button>
<button id="Btn2" name="ButtonName2" value="2">#2</button>
<script type='text/javascript'>
//<![CDATA[
var btnArray=[Btn1,Btn2]
for (var i =0;i<btnArray.length; i++){
btnArray[i].addEventListener("click", function() {
TextBox1.innerHTML=
"ButtonId="+this.id
+"</br></br>"
+"ButtonName="+this.name
+"</br></br>"
+"ButtonValue="+this.value
+"</br></br>"
+"ButtonIndex="+btnArray.indexOf(this);
});
}
//]]>

</script>
------------------------------------------------------------------------
IF STATEMENT JAVA SCRIPT AND FUNCTION BUTTON INNER HTML SAME
we also use this code
if(Btn1.innerHTML==Btn2.innerHTML){
or use this code
if(Btn1.innerHTML== "A" && Btn2.innerHTML == "A"){
------------------------------------------------------------------------
<button id="Btn1">Btn1</button>
<button id="Btn2">Btn2</button>
<p id="demo"></p>
<script>
Btn1.onclick = function(){
Btn1.innerHTML="A";
myFunction();
}
Btn2.onclick = function(){
Btn2.innerHTML="A";
myFunction();
}
function myFunction(){
if(Btn1.innerHTML==Btn2.innerHTML){
demo.innerHTML= "EQUAL";
Btn1.style.visibility="hidden";
Btn2.style.visibility="hidden";
}
}
myFunction();
</script>
-------------------------------------------------------------------------------------------------------------
STRING ADDS
https://www.youtube.com/watch?v=hoa2VhyHX4w
------------------------------------------------------------------------------------------------------------
<p id="demo"></p>
<script>
var string1 = "A";
var string2 = "B";
document.getElementById("demo").innerHTML =string1+string2
//OUTPUT:AB
</script>
--------------------------------------------------------------------------------------------------------------
<p id="demo"></p>
<script>
var Array1 = ["A","B"]
var Array2 = ["C","D"]
document.getElementById("demo").innerHTML=Array1+","+Array2
//OUTPUT:A,B,C,D
</script>
--------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
<!-- https://stackoverflow.com/questions/34914707/how-to-compare-between-two-or-more-buttons-in-js -->
<button id='1' onclick="myFunction(this)">button 1</button>
<button id='2' onclick="myFunction(this)">button 2</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(elem) {
document.getElementById("demo").innerHTML = "ID:" + elem.id;
}
</script>
 ---------------------------------------------------------------------------------------------------------------
var btnArray = document.getElementsByTagName("button");
OR USE
var btnArray =[
document.getElementById('test1'),
document.getElementById('test2'),
];
----------------------------------------------------------------------------------------------------------------
<html>
<!-- http://jsfiddle.net/jfriend00/7frQ5/ -->
<!-- http://flashcollege.blogspot.co.uk/2016/03/score-count-button-array-as3.html -->
<!-- http://fbgadgets.blogspot.co.uk/2017/07/image-src-array-in-java-script.html -->
<!-- https://stackoverflow.com/questions/21517435/javascript-how-to-get-the-id-of-the-button-that-was-just-clicked -->
<head>
<title> by jfriend00</title>
</head>
<body>
<button id="test1">btn1</button><br>
<button id="test2">btn2</button><br>
<script type='text/javascript'>
//<![CDATA[
var btnArray = document.getElementsByTagName("button");
for (var i = 0; i < btnArray.length; i++) {
btnArray[i].addEventListener("click", function(expandInfo) {
alert(this.id);
});
}
//]]>
</script>
</body>
</html>
 ---------------------------------------------------------------------------------------------------------------
 IMAGE ARRAY 
----------------------------------------------------------------------------------------------------------------
<html>
<head>
</head>
<body>
<img id="target" src="http://www.java2s.com/style/download.png" width="107" height="98" />
<input type="button" onclick="nextPic()" value="change image" />
<script>
var target = document.getElementById('target');
var counter = 0;
var myPictures = [
"http://www.bildersuche.org/images/logos/pixabay-logo.png",
"http://www.bildersuche.org/images/logos/123rf-logo.jpg",
"http://www.java2s.com/style/download.png"
];
function nextPic() {
counter += 1;
if (counter > myPictures.length -1) {
counter = 0;
}
target.src = myPictures[counter];
}
</script>
</body>
</html>

https://stackoverflow.com/questions/8801787/get-index-of-clicked-element-using-pure-javascript
 ----------------------------------------------------------------------------------------------------------------
<html>
<head>
<meta charset="utf-8" />
<title>Get index of clicked element using pure javascript
</title>
<style type="text/css">
body{margin:0;}
#container div{height:50px;line-height:50px; text-align:center}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<script>
for (i = 0; i < document.getElementById('container').children.length; i++) {
document.getElementById('container').children[i].onclick = function(){alert('Number ' + i + ' was clicked')};
}
</script>
</body>
</html>
 ----------------------------------------------------------------------------------------------------------------
SAY HELLO WITH DIFFERENT BUTTON ARRAY
CAN BE WRITTEN IN THIS WAY
var btnArray=[buttonOne,buttonTwo,buttonThree]
btnArray[i].onclick = function(){
btnArray[i].addEventListener("click",FN1,true);

function FN1(){
-----------------------------------------------------------------------------------------------------------------
<html>
<!-- https://stackoverflow.com/questions/43301431/trying-to-access-an-array-with-onclick-function -->
<body>
<title> SAY HELLO WITH DIFFERENT BUTTON ARRAY </title>
<button id="buttonOne">#1</button>
<button id="buttonTwo">#2</button>
<button id="buttonThree">#3</button>
<script type='text/javascript'>
var btnArray = [
document.getElementById('buttonOne'),
document.getElementById('buttonTwo'),
document.getElementById('buttonThree'),
];
for (var i = 0; i < btnArray.length; i++){
btnArray[i].addEventListener('click', function(){
alert('SAY HELLO');//alert(this.id);
})
}
</script>
</body>
</html>
===========================================================================
<body>
<title> SAY HELLO WITH DIFFERENT BUTTON ARRAY </title>
<button id="buttonOne">#1</button>
<button id="buttonTwo">#2</button>
<button id="buttonThree">#3</button>
<script type='text/javascript'>
var btnArray = [
document.getElementById('buttonOne'),
document.getElementById('buttonTwo'),
document.getElementById('buttonThree'),
];
for (var i = 0; i < btnArray.length; i++){
btnArray[i].addEventListener("click",FN1,true);
function FN1(){
alert('SAY HELLO');//alert(this.id);
}
}
</script>
</body>
---------------------------------------------------------------------------
BUTTON ID TRACE BY CHILD METHOD
---------------------------------------------------------------------------
<div id="container">
<button id="buttonOne">#1</button>
<button id="buttonTwo">#2</button>
<button id="buttonThree">#3</button>
</div>
<script>
for (i = 0; i < document.getElementById('container').children.length; i++) {
document.getElementById('container').children[i].onclick = function(){alert(this.id)};
}
</script>
---------------------------------------------------------------------------
buttons position shuffle  in javascript
javascript - shuffle HTML list element order
----------------------------------------------------------------------------------------------------------------
<ul> <li>Sunday</li> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> <li>Thursday</li> <li>Friday</li> <li>Saturday</li> </ul> <script> var ul = document.querySelector('ul'); for (var i = ul.children.length; i >= 0; i--) {ul.appendChild(ul.children[Math.random() * i | 0]); } </script>
---------------------------------------------------------------------------
<div id="container">
<button id="buttonOne">#1</button>
<button id="buttonTwo">#2</button>
<button id="buttonThree">#3</button>
</div>
<script>
for (var i = container.children.length; i >= 0; i--) {
container.appendChild(container.children[Math.random() * i | 0]);
}
</script>
-------------------------------------------------------------------------
RANDOM WORD ARRAY IN JAVA SCRIPT 
READ MORE:
https://fbgadgets.blogspot.com/2017/07/image-src-array-in-java-script.html
-------------------------------------------------------------------------
<DIV id="TextBox1"></DIV>
<script>
var MovieArray = ["MOVIE1","MOVIE2","MOVIE3"];
for (var i = 0; i < MovieArray.length;  i++) {
var RandomNumber = Math.floor(Math.random()* MovieArray.length);
var MoviePosX = MovieArray[RandomNumber];
MovieArray[RandomNumber] = MovieArray[i];
MovieArray[i] = MoviePosX;
}
TextBox1.innerHTML += MovieArray;
document.write(MovieArray);
</script>
-------------------------------------------------------------------------
<div id="container">
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
</div>
<script>
var Array =[btn1,btn2,btn3,btn4];
Array.sort(FunctionName,true);
function FunctionName(){
return 0.5 - Math.random()
}
for (var i = 0, l = Array.length; i < l; i++) {
container.appendChild(Array[i]);
}
</script>
-------------------------------------------------------------------------
OR USE THIS CODE
-------------------------------------------------------------------------
<div id="container">
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
</div>
<script>
var Array =[btn1,btn2,btn3,btn4];
Array.sort(FunctionName,true);
function FunctionName(){
return 0.5 - Math.random()
}
for (var i = 0; i <Array.length; i++) {
container.appendChild(Array[i]);
}
</script>
-------------------------------------------------------------------------
FOR LOOPS ADD FOR CLICK AND RANDOM
--------------------------------------------------------------------------
<div id="container">
<button id="btn1">#1</button>
<button id="btn2">#2</button>
<button id="btn3">#3</button>
</div>
<script>
for (i =0;i<container.children.length;i++) {
container.children[i].onclick = function(){alert(this.id)};
}
for (i =0;i<container.children.length;i--) {
container.appendChild(container.children[Math.random()* i | 0]);
}
</script>
-------------------------------------------------------------------------
OR USE THIS CODE FOR RANDOM BUTTON
-------------------------------------------------------------------------
<div id="container">
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
</div>
<script>
var Array = new Array(btn1,btn2,btn3,btn4);
var RandomNumber = Math.floor(Math.random()* Array.length)
container.appendChild(Array[RandomNumber]);

</script>
--------------------------------------------------------------------------
<div id="TextBox1"></div>
<div id="container">
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
</div>
<script>
var Array =[btn1,btn2,btn3,btn4];
for (var i = 0; i <Array.length; i++) {
Array[i].onclick = function(){
TextBox1.innerHTML = this.id ;
};
container.appendChild(Array[Math.random()* i | 0]);
}

</script>
===========================================================================
WE USE ARRAY AS A BUTTON OBJECET THEREFOR WE USE THIS ARRAY STYLE
var btnArray = [(buttonOne),(buttonTwo),(buttonThree)];
OR USE THIS METHOD:
var btnArray = [buttonOne,buttonTwo,buttonThree];
===========================================================================
<div id="TextBox1"></div>
<button id="buttonOne">#1</button>
<button id="buttonTwo">#2</button>
<button id="buttonThree">#3</button>
<script type='text/javascript'>
var btnArray = [(buttonOne),(buttonTwo),(buttonThree)];
for (var i = 0; i < btnArray.length; i++){
btnArray[i].addEventListener("click",FN1,true);
function FN1(){
alert('SAY HELLO');//alert(this.id);
TextBox1.innerHTML = this.id ;
}
}
</script>
-------------------------------------------------------------------------------------------------------------------
AS3 CODE CHANGE INTO JAVASCRIPT
var btnArray = new Array(btn1,btn2);
var textArray = new Array("TEXT1","TEXT2");
OR USE THIS WAY
var btnArray = [btn1,btn2];
var textArray = ["TEXT1","TEXT2"];
-------------------------------------------------------------------------------------------------------------------
DON'T USE MOUSE EVENT
btnArray[i].addEventListener(MouseEvent.CLICK, expandInfo);
btnArray[i].addEventListener("click",expandInfo,true);
-------------------------------------------------------------------------------------------------------------------
<!-- http://flashcollege.blogspot.co.uk/2016/03/trace-array-in-text-box-as2-as3.html -->
<div id="TextBox1"></div>
<button id="btn1">#1</button>
<button id="btn2">#2</button>
<script type='text/javascript'>
var btnArray = new Array(btn1,btn2);
var textArray = new Array("TEXT1","TEXT2");
for (var i = 0; i < textArray.length; i++){
btnArray[i].addEventListener("click",expandInfo,true);
function expandInfo(e){
alert(textArray[btnArray.indexOf(e.target)]);
}
}
</script>
-------------------------------------------------------------------------------------------------------------------
HOW TO index of USE IN JAVASCRIPT
-------------------------------------------------------------------------------------------------------------------
<body>
<textarea id="textbox1"></textarea>
<script>
var Array1= ["A","B","C","D"];
document.getElementById("textbox1").innerHTML = Array1.indexOf("B");
//BECAUSE ARRAY COUTING START WITH ZERO A=0,B=1,C=2,D=3,
//OutPut = 1;
</script>
</body>
-------------------------------------------------------------------------------------------------------------------
BUTTON ADD EVENT LISTENER JAVASCRIPT
https://www.sitepoint.com/community/t/how-to-get-click-id-with-addeventlistener-medthod/31777/13
https://www.w3schools.com/jsreF/tryit.asp?filename=tryjsref_element_addeventlistener
EVENT.TARGET
https://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_target
-----------------------------------------------------------------------------------------------------------------
<body>
<button id="Btn1">BUTTON 1</button>
<p id="demo"></p>
<script>
Btn1.addEventListener("click",FN1,true);
function FN1(){
demo.innerHTML = "HELLO";
}
</script>
</body>
-------------------------------------------------------------------------------------------------------------------
<!-- https://www.sitepoint.com/community/t/how-to-get-click-id-with-addeventlistener-medthod/31777/13 -->
<!-- https://www.w3schools.com/jsreF/tryit.asp?filename=tryjsref_element_addeventlistener -->
<body>
<button id="" onClick="FN1(this.id)">BUTTON 1</button>
<p id="demo"></p>
<script>
Btn1.addEventListener("click",FN1,true)
function FN1(){
document.getElementById("demo").innerHTML = "HELLO";
}
</script>

</body>
================================================================
<button id="Btn1">BUTTON 1</button>
<p id="demo"></p>
<script>
document.getElementById("Btn1").addEventListener("click",FN1,true);
function FN1() {
document.getElementById("demo").innerHTML = "HELLO";
}
</script>
</body>
================================================================
<body>
<button id="Btn1">BUTTON 1</button>
<p id="demo"></p>
<script>
document.getElementById("Btn1").addEventListener("click",FN1,true);
function FN1() {
alert(this.id);
document.getElementById("demo").innerHTML = this.id;
}
</script>
</body>
================================================================
<body>
<button id="Btn1">BUTTON 1</button>
<p id="demo"></p>
<script>
Btn1.addEventListener("click",FN1,true);
function FN1() {
alert(this.id);
document.getElementById("demo").innerHTML = this.id;
}
</script>
</body>
================================================================
AS3 MATCHING GAME
================================================================
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>

<script>

var bCards=[btn1,btn2,btn3,btn4];

var indexNum2;
var clicked1Time = false;

for(var i = 0; i < bCards.length; i++){
bCards[i].addEventListener("click",openCard,true);
}

function openCard(e){

e.target.style.visibility = "hidden";
Math.floor(bCards.indexOf(e.target)/2);

if(clicked1Time == false){
clicked1Time = true;
indexNum2 = Math.floor(bCards.indexOf(e.target)/2);
}

else{

for(var i= 0; i < bCards.length; i++){
bCards[i].removeEventListener("click",openCard,true);
}

clicked1Time = false;

if(Math.floor(bCards.indexOf(e.target)/2) == indexNum2){
for(var i= 0; i< bCards.length; i++){
bCards[i].addEventListener("click",openCard,true);
}}


else{

for(var i = 0;i < bCards.length; i++){
bCards[i].addEventListener("click",openCard,true);
}

bCards[Math.floor(Math.floor(bCards.indexOf(e.target)/2)*2)].style.visibility = "visible";
bCards[Math.floor(Math.floor(bCards.indexOf(e.target)/2)*2) + 1].style.visibility = "visible";
bCards[Math.floor(indexNum2*2)].style.visibility = "visible";
bCards[Math.floor(indexNum2*2) + 1].style.visibility = "visible";

}


}

}

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


================================================================




0 comments:

Post a Comment

FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

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