Is there a single function that returns number (when called) depending on which button was clicked-CodePudding

I have four buttons which i want for them to return a value: 0, 1, 2, 3 depending on the button's index clicked Ex.when I Click the second button console.log(function()); will output 1

Maybe something like this

click[1].addEventListener("click", jon);
click[2].addEventListener("click", jon);
click[3].addEventListener("click", jon);

function jon(){return 0;}
function jon(){return 1;}
function jon(){return 2;}
function jon(){return 3;}

console.log(jon());

CodePudding user response：

You can use data-attribute here. When you click on the button then you can get the value of dataset from e.target

const buttons = document.querySelectorAll("button");

function clickHandler(e) {
  const value = e.target.dataset.value;
  console.log(`button${value} is clicked`);
}

for (let button of buttons) {
  button.addEventListener("click", clickHandler)
}

<button data-value="0">button0</button>
<button data-value="1">button1</button>
<button data-value="2">button2</button>
<button data-value="3">button3</button>

CodePudding user response：

You could try this approach:

let myButtonSet = document.getElementsByClassName("myButton");
let myClickedButton;
    
for(i=0; i<myButtonSet.length; i  ) {
  myButtonSet[i].setAttribute('onclick', `clicked(${i})`)
}
    
function clicked(e) {
  console.log(`Button ${e} clicked!`);
  myClickedButton = e;
}

function lastClicked() {
  console.log(`Index of last clicked button: ${myClickedButton}`);
}

<button class="myButton">I am button 0</button>
<button class="myButton">I am button 1</button>
<button class="myButton">I am button 2</button>
<button class="myButton">I am button 3</button>

<button class="anotherButton" onclick="lastClicked()">Index of last clicked button</button>