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 :

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

DYNAMIC VIEWS BLOGGER TEMPLATE

QUIZY MEMORY CARD GAME

CTX STYLE

IMAGE SRC ARRAY IN JAVA SCRIPT

QUIZ ACTIVITY MAKER

MEMORY GAME WITH UPPER HIDDEN CARD

BUTTON PADDING CHANGE HEIGHT WIDTH

SHOPIFY FANCY BOX

BASIC ELEVATE ZOOM PLUS

ELEVATE ZOOM JAVA SCRIPT WITH ONE I...

SHOPIFY THEME SLIDER EDIT

INPUT BUTTON VALUE SWAP
?
+
X
Recommended for you
Loading..
Related Post for GET BUTTON ID AFTER CLICK IN JAVA SCRIPT
REMOVE MATCHING ID IN JAVASCRIPT -------------------------------------------------------------------------------------------------------------------- REMOVE MATCHING ID IN JAVASCRIPT READ MORE: https://jsperf…
IMAGE SRC ARRAY IN JAVA SCRIPT --------------------------------------------------------------------------------------------------------------- CODE:1 http://fbgadgets.blogspot.co.uk/2017/07/java-script-arra…
CSS SLIDER WITHOUT JS ----------------------------------------------------------------------------------------------------------- ReadMore: http://cssslider.com/non-jquery-carousel-7.html SAVE …
AUTO CSS JS SLIDER WITH ARROW BULLET ------------------------------------------------------------------------------------------------------- BX SLIDER CODE: READ MORE: BX SLIDER IN BLOGGER TEMPALTE - You…
FLASH CODE CHANGE INTO JAVASCRIPT ------------------------------------------------------------------------------------------------------------------- AS3 CODE http://flashcollege.blogspot.co.uk/2016/03/trace-ar…
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.