Saturday, 19 August 2017
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijW5hD9l7Aq7HIdJuGlYNQkboPWAgHeSWuxZKsHruigD1UlGVhJ_z2czB43R3EGcsECYcGdBPY7i_ic0GEn9bWgOkjDWOdXpa1DJ1edtnz-Ui6z6H33kxgu_AhymJdwiCVr05ZgsN6zFc9/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmtzUWLAKgAgfuhUUFh-KvZ4Ub1AGWSAJMkDkrojYX0Qhq2vtbL0QEbt6u2GJg0TgzvuW7qarxJ9UCAiRl7xQvLHfCtoLg03MEaA2UsmxCO5PK_ygbNbpXFkRgo6LNOoafePAJBuACRba/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(){
-------------------------------------------------------------------------------------------------------------------
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 SAMEwe 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 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>
--------------------------------------------------------------------------------------------------------------
<script>
var Array1 = ["A","B"]
var Array2 = ["C","D"]
document.getElementById("demo").innerHTML=Array1+","+Array2
//OUTPUT:A,B,C,D
</script>
--------------------------------------------------------------------------------------------------------------
match two same button in javascript
https://www.google.co.uk/search?hl=en&biw=1164&bih=631&q=match+two+same+button+in+javascript&oq=match+two+same+button+in+javascript&gs_l=psy-ab.3...14979.16492.0.17214.5.5.0.0.0.0.180.451.4j1.5.0....0...1.1.64.psy-ab..0.0.0.r4iM_acqo0I
https://stackoverflow.com/questions/34914707/how-to-compare-between-two-or-more-buttons-in-js
https://stackoverflow.com/questions/33073601/find-html-elements-have-same-data-attribute-values-as-button-with-jquery
https://www.google.co.uk/search?hl=en&biw=1164&bih=631&q=match+two+same+button+in+javascript&oq=match+two+same+button+in+javascript&gs_l=psy-ab.3...14979.16492.0.17214.5.5.0.0.0.0.180.451.4j1.5.0....0...1.1.64.psy-ab..0.0.0.r4iM_acqo0I
https://stackoverflow.com/questions/34914707/how-to-compare-between-two-or-more-buttons-in-js
https://stackoverflow.com/questions/33073601/find-html-elements-have-same-data-attribute-values-as-button-with-jquery
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
var btnArray = document.getElementsByTagName("button");
OR USE
var btnArray =[
document.getElementById('test1'),
document.getElementById('test2'),
];
----------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
IMAGE ARRAY
<!--
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>
----------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------
traget image name in javascript
https://www.google.co.uk/search?q=traget+image+name+in+javascript&rlz=1C1CHBD_en-GBGB755GB755&oq=traget+image+name+in+javascript&aqs=chrome..69i57.29487j0j7&sourceid=chrome&ie=UTF-8
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_get
<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>
traget image name in javascript
https://www.google.co.uk/search?q=traget+image+name+in+javascript&rlz=1C1CHBD_en-GBGB755GB755&oq=traget+image+name+in+javascript&aqs=chrome..69i57.29487j0j7&sourceid=chrome&ie=UTF-8
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_get
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>
<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
-----------------------------------------------------------------------------------------------------------------
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
================================================================
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>
================================================================
Related movie you might like to see :

SHOPIFY FANCY BOX

BASIC ELEVATE ZOOM PLUS

ELEVATE ZOOM JAVA SCRIPT WITH ONE I...

SHOPIFY THEME SLIDER EDIT

INPUT BUTTON VALUE SWAP
JAVA SCRIPT BOOKS ONLINE

PRINT STAR PATTERN IN JAVA SCRIPT

MOUSE OVER MOUSE OUT IN JAVA SCRIPT

BLOCK JAVA SCRIPT BY GOOGLE CHROME

MOUSE COORDINATES IN JAVA SCRIPT

FLASH CODE CHANGE INTO JAVASCRIPT

REMOVE MATCHING ID IN JAVASCRIPT

REMOVE RETURN VARIABLE REMOVE VARIA...

QUIZ WITHOUT JAVASCRIPT

Drag And Drop English To Urdu Match...

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

TEXT COMPARE OR DUPLI TEXT FINDER

RELATED POST WIDGET LIST WITHOUT TH...

BOOLEAN MATCHING GAME JAVASCRIPT

JAVA SCRIPT LOOP
?
+
X
Recommended for you
Loading..
Related Post for GET BUTTON ID AFTER CLICK IN JAVA SCRIPT
BLOCK JAVA SCRIPT BY GOOGLE CHROME -------------------------------------------------------------------------------------------------------------------------------------- java file block in google chrome h…
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
PAIR MATCHING GAME -------------------------------------------------------------------------------------------------------------- https://codepen.io/natewiley/pen/HBrbL https://codepen.io/jdnicho…
PRINT STAR PATTERN IN JAVA SCRIPT ---------------------------------------------------------------------------------------------------------- PRINT STAR PATTERN IN JAVA SCRIPT ----------------------------------…
JS IMAGE SCROLLER -------------------------------------------------------------------------------------------------------------- JS IMAGE SCROLLER CODE image scroller https://amazingcarousel.com…
FILE SAVE AS WITH JAVA SCRIPT METHOD CODE ----------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN POST HTML SECTION READ MORE: http…
MOUSE COORDINATES IN JAVA SCRIPT -------------------------------------------------------------------------------------------------------------- mouse coordinates finder on website https://chrome.google.com/web…
Direct Links to your Files on Google Drive DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINK…
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
TEXT COMPARE OR DUPLI TEXT FINDER ------------------------------------------------------------------------------------------------------------------ READ MORE: FIND RED TEXT IN GOOGLE: text compare downl…
QUIZ ACTIVITY MAKER --------------------------------------------------------------------------------------------------------------------- ReadMore: https://www.quia.com/web Concentration game to…
BLOGGER INCLUDABLE SECTION ------------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------…
JAVA FILE MAKE & SAVE IN NOTE PAD CLICK AND OPEN NOTE PAD IN WNDOW MENU BAR -------------------------------------------------------------------------------------------------------- COPY…
BOOLEAN MATCHING GAME JAVASCRIPT ------------------------------------------------------------------------------------------------------------------- USEFUL LINKS https://github.com/IonicaBizau/match.js http:/…
REMOVE RETURN VARIABLE REMOVE VARIABLE IN FUNCTION BRACKETS IN JAVA SCRIPT -------------------------------------------------------------------------------------------------------------------- REMOVE RETURN VARIABLE IN JAVA SCRIPT ReadMore: http://fbg…
CTX STYLE ------------------------------------------------------------------------------------------------------------------ READ MORE https://www.google.co.uk/search?q=canvas+draw+tran…
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN W…
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
ON LINE JAVA LIBRARY -------------------------------------------------------------------------------------------------------- READ MORE: https://cdnjs.com/libraries https://code.angularjs.org/ http…
Labels:
H,
HTML TUTORIALS,
J,
Q,
QuizScript
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.