Click here to Skip to main content
15,030,701 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have the code below
Javascript and HTML

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/

What I have tried:

HTML
<pre><!DOCTYPE HTML>
<html>
    <head>
        <title>
            clicked button in JavaScript
        </title>
    </head>

    <body style = "text-align:center;">
<header>
  <h1> Clicker costumer queue identify button</h1>
</header>
<center>
  <button  id="c" class="button" onclick="uppass()" style=" font-size: 16px; margin: 0 10px;"> Common </button>
    <button id="f" type="button" onclick="uppass()" style=" font-size: 16px; margin: 0 10px;"> Fast </button>
    <button id="p" type="button" onclick="uppass()" style=" font-size: 16px; margin: 0 10px;"> Priority </button>
</center>
<h5>Sua senha é:</h5><h2 id="newclient" style="font-size: 12px; display: inline-block; padding-left: 20px;">0</h5>
</body>
</html>


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

++value;

console.log(value);
document.getElementById("newclient").innerHTML = value;
}
Posted
Updated 13-Jul-21 6:21am

1 solution

All of your buttons are making calls to the JS uppass() method, but how do you identify which of the buttons made the click? You can add support for this by adding a parameter to your method:
JavaScript
function uppass (key) {

Then you can pass the value in when the button is clicked. You can either do it manually:
JavaScript
<button .. onclick="uppass('c')">

Or you can use the id attributes you've added to your buttons:
JavaScript
<button id="c" .. onclick="uppass(this.id)">

JavaScript Function Parameters[^]
Functions - JavaScript | MDN[^]
   
Comments
markmark01 14-Jul-21 18:07pm
   
I wrote the "key" inside the function but it didn't change at all, and I changed onclick="uppass() to onclick="uppass(this.id) and it didn't change anything either. Remembering that I'm quite a layman on this, so I need a very detailed explanation.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900