Javascript Clicker customer queue identify buttons

Question

I have the code below
Javascript and HTML

function uppass () {
var element = document.getElementById("newclient");
var value = element.innerHTML;

++value;

console.log(value);
document.getElementById("newclient").innerHTML = value;
}



    
        
            clicked button in JavaScript
        
    

    

   Clicker customer queue identify button


  
    
    

Sua senha é:
0

I am implementing buttons for a queue of customers, each button that is clicked will increase a number. Until then I managed to solve. I want to identify each button that is clicked.
For example. When clicking on common, the letter c appears in front of the number, when clicking on fast the letter f and priority the letter p. but the numbers are still in sequence.
For example. clicking buttons randomly
c - 1
f - 2
c - 3
p - 4
f - 5
f - 6
c-7
and so on.
I managed to make the buttons and count, but I can't identify each one. Can someone help? Thanks.

Code on https://jsfiddle.net/t8y31fo5/

user_14032355 · Answer

You can use event delegation and it is more practical and you can pass an event inside the function and get the id from the event.

document.querySelector("center").addEventListener("click", uppass);

function uppass(event) {
  if (event.target.tagName === "BUTTON") {
    const element = document.getElementById("newclient");
    let value = element.innerHTML.replace(/[^0-9]/g, "");

    ++value;
    element.innerHTML = `${event.target.id}-${value}`;
  }
}



  
    clicked button in JavaScript
  

  
    
      Clicker customer queue identify button
    
    
      
      
      
    
    Sua senha é:
    
      0

user_10000741 · Answer

function uppass (e) {
var element = document.getElementById("newclient");
   let value = element.innerHTML.replace(/[^0-9]/g, "");

++value;


 
let newValue=e.id +'--' +value ;
 


document.getElementById("newclient").innerHTML =  newValue;
}



    
        
            clicked button in JavaScript
        
    

    

   Clicker customer queue identify button


  
    
    

Sua senha é:
0

user_14251221 · Answer

You can pass the element as a parameter to the function via this and get the parameter's id property:

function uppass(t) {
  var element = document.getElementById("newclient");
  var value = newclient.innerHTML;
  ++value;
  console.log(t.id + "-" + value);
  document.getElementById("newclient").innerHTML = value;
}





  
    clicked button in JavaScript
  



  
     Clicker customer queue identify button
  
  
    
    
    
  
  Sua senha é:
  0

Javascript Clicker customer queue identify buttons

3 Answers