CODEWITHSUNDEEP
javascripthtml
Taimoor Ahmed
Taimoor Ahmed

Reputation: 69

How to call different functions based on recently clicked buttons?

I have the following code with two buttons "Button 1" and "Button 2". I want to have 2 different texts in my assigned paragraph. If "Button 1" is clicked, the text should show "Button 1 was clicked." and if "Button 2" is clicked, the text should show "Button 2 was clicked." And if we click no any button, the text should show "No button was clicked."

function btnSelector() {
  var x = document.getElementById("btn1")
  var y = document.getElementById("btn1")
  var z = document.getElementById("demo")
  if (x.click == "true") {z.innerHTML = "Button 1 was clicked."}
  
  else if (y.click == "true") {z.innerHTML = "Button 2 was clicked."}
  
  else {z.innerHTML = "No button was clicked."}
}
<p id="demo"></p>
<button id="btn1" value="enter"/>Button 1</button>
<button id="btn2" value="enter"/>Button 2</button><br><br>
<button id="proceed" onclick="btnSelector()">Proceed</button>

The problem I'm facing is that my code isn't detecting any click on both of my button. Need your help!

P.S: It's just a sample code I wrote here. In my main project I need calling different functions based on recently clicked buttons but I hope if this I find solution to this sample code, it'll definitely help solving the problem in my main project.

Upvotes: 0

Views: 172

Answers (3)

Tom O.
Tom O.

Reputation: 5941

This type of problem is a good candidate for event delegation. This approach lets you add a single delegated event listener (on a parent element) instead of many event listeners (one per button).

This technique is only possible due to the nature of event propagation (bubbling and capturing) in the DOM. 

const demoEl = document.querySelector('#demo');
const getButtonDescription = e => {
  if (e.target.tagName === 'BUTTON') {
    return e.target.textContent;
  }

  return 'nothing';
};

document.querySelector('#container').addEventListener('click', e => {
  const desc = getButtonDescription(e);
  demoEl.textContent = desc ? `You clicked ${desc}` : '';
});
<div id="container">
  <p id="demo"></p>
  <button id="btn1" value="enter">Button 1</button>
  <button id="btn2" value="enter">Button 2</button><br><br>
  <button id="proceed">Proceed</button>
</div>

You can see in my example that I have enclosed all your HTML in a div with id='container'. I added the event listener to the the container div and nowhere else:

Upvotes: 1

A. Meshu
A. Meshu

Reputation: 4148

More of the same, this is how i would do it:

var btns = document.getElementsByTagName('button'); // set variable for the buttons
for (var i=0; i < btns.length; i++) { // loop the buttons
  btns[i].addEventListener('click', function() { // add Event Listener
	document.getElementById('demo').textContent = 'Button ' + this.id + ' clicked! '; // Write the click message
  });
}
<p id="demo">No button was clicked</p>
<button id="btn1" value="enter"/>Button 1</button>
<button id="btn2" value="enter"/>Button 2</button><br><br>
<button id="proceed">Proceed</button>

Upvotes: 0

mehulmpt
mehulmpt

Reputation: 16587

That is not how event handlers work. You might want to read about them on MDN: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Take a look at the code below to get a hint.

function btnSelector(btnID) {
  const z = document.getElementById('demo')
  switch(btnID) {
    case 0:
      z.innerHTML = "No button was clicked."
      break
    case 1:
       z.innerHTML = "Button 1 was clicked."
       break
    case 2:
       z.innerHTML = "Button 2 was clicked."
       break
  }
}
<p id="demo"></p>
<button id="btn1" value="enter" onclick="btnSelector(1)">Button 1</button>
<button id="btn2" value="enter" onclick="btnSelector(2)">Button 2</button><br><br>
<button id="proceed" onclick="btnSelector(0)">Proceed</button>

Upvotes: 1

Related Questions