CODEWITHSUNDEEP
javascripthtmlcssfunction
jerz
jerz

Reputation: 65

How to detect which button is clicked in javascript?

im trying to figure out how to carry the id of the button when clicked to my function. 1 function to change color on mouseover and one function to change it back to original color when mouseout. i know i can do it simply in css but i just want to learn how to do it in javascript. Thanks in advance. Below is my code.

  var buttonClass = this.className();
 // document.getElementById("mainTitle");
  this.style.backgroundColor="#000000";
  this.style.color="#ffffff";
  this.style.cursor = "pointer";  
}

function defaultColor() {
  var buttonClasss = this.getElementById();
  //document.getElementById("addList");
  this.style.backgroundColor = "#ffffff";
  this.style.color = "#000000";
    this.style.cursor = "pointer";
}
  

//event listener for Change Title button
document.getElementById("mainTitle").addEventListener("mouseover", changeColor);
document.getElementById("mainTitle").addEventListener("mouseout", defaultColor);
document.getElementById("mainTitle").addEventListener("click", changeTitle);
//event listener for change title ends here

//event listener for add listing
document.getElementById("addList").addEventListener("mouseover", changeColor);
document.getElementById("addList").addEventListener("mouseout", defaultColor);
document.getElementById("addList").addEventListener("click", addListing);
//event listener for add listing ends here
#mainTitle {
  border:1px solid #ff33f4;
  float:left;
  clear:both;
  font-family:arial;
  font-weight:bold;
  font-size:20px;
  border-radius:50px;
  background-color:#ff33ff;
  width:200px;
  height:35px;
  text-align:center;
  padding-top:20px;
  padding-bottom:10px;
  cursor:pointer;
}

#addList {
  border:1px solid #ff33f4;
  float:right;
  font-family:arial;
  font-weight:bold;
  font-size:20px;
  border-radius:50px;
  background-color:#ff33ff;
  width:200px;
  height:35px;
  text-align:center;
  padding-top:20px;
  padding-bottom:10px;
  cursor:pointer;
}

#main {
  clear:both;
  margin-top:120px;
}
 
  <div id="mainTitle" class="changeTitle">Change Title</div>
  <div id="addList" class="addList">Add List</div>

Upvotes: 1

Views: 209

Answers (2)

Owuor
Owuor

Reputation: 616

When you attach a function to an event, you don't really need to track the id of the element emitting the event, you just need to use the 'this' keyword to access it. Below is a sample of this using your sample code.

<html>
<head>
<style>
#mainTitle {
  border:1px solid #ff33f4;
  float:left;
  clear:both;
  font-family:arial;
  font-weight:bold;
  font-size:20px;
  border-radius:50px;
  background-color:#ff33ff;
  width:200px;
  height:35px;
  text-align:center;
  padding-top:20px;
  padding-bottom:10px;
  cursor:pointer;
}

#addList {
  border:1px solid #ff33f4;
  float:right;
  font-family:arial;
  font-weight:bold;
  font-size:20px;
  border-radius:50px;
  background-color:#ff33ff;
  width:200px;
  height:35px;
  text-align:center;
  padding-top:20px;
  padding-bottom:10px;
  cursor:pointer;
}

#main {
  clear:both;
  margin-top:120px;
}
</style>
<script type="text/javascript">


function defaultColor() {
  //var buttonClasss = this.getElementById();
  //document.getElementById("addList");
  this.style.backgroundColor = "#ffffff";
  this.style.color = "#000000";
    this.style.cursor = "pointer";
}
  function changeColor(){
  this.style.backgroundColor="#000000";
  this.style.color="#ffffff";
  this.style.cursor = "pointer";
  }
  function changeTitle(){
  }
  function addListing(){
  }
function OnL(){
//event listener for Change Title button
document.getElementById("mainTitle").addEventListener("mouseover", changeColor);
document.getElementById("mainTitle").addEventListener("mouseout", defaultColor);
document.getElementById("mainTitle").addEventListener("click", changeTitle);
//event listener for change title ends here

//event listener for add listing
document.getElementById("addList").addEventListener("mouseover", changeColor);
document.getElementById("addList").addEventListener("mouseout", defaultColor);
document.getElementById("addList").addEventListener("click", addListing);
}
</script>
</head>
<body onload="OnL()">

  <div id="mainTitle" class="changeTitle">Change Title</div>
  <div id="addList" class="addList">Add List</div>
</body>
</html>

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41832

Every event registered will comes with argument Event.

function defaultColor(e) {
                  //  ^ argument (Event)

     var currentClickedButton = e.currentTarget;   // to get the current clicked button
     /* Your code here */
}

Upvotes: 5

Related Questions