Javascript Clicker 客户队列识别按钮

Question

我有下面的代码
Javascript 和 HTML

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

++value;

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

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

    <body style = "text-align:center;">
<header>
  <h1> Clicker customer 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>

我正在为客户队列实现按钮，单击每个按钮都会增加一个数字。直到那时我才设法解决。我想识别每个被点击的按钮。
例如。当点击 common 时，字母 c 出现在数字前面，当点击 fast 时字母 f 和 priority 字母 p.但是数字还是有顺序的。
例如。随机点击按钮
c - 1
f - 2
c - 3
p - 4
f - 5
f - 6
c-7
等等。
我设法制作了按钮并数了数，但我无法识别每一个。有人可以帮忙吗？谢谢。

https://jsfiddle.net/t8y31fo5/

上的代码

Answer 1

你可以使用事件委托，它更实用，你可以在函数内部传递一个event，然后从event中得到id。

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}`;
  }
}

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

  <body style="text-align: center">
    <header>
      <h1>Clicker customer queue identify button</h1>
    </header>
    <center>
      <button id="c" class="button" style="font-size: 16px; margin: 0 10px">
        Common
      </button>
      <button id="f" type="button" style="font-size: 16px; margin: 0 10px">
        Fast
      </button>
      <button id="p" type="button" 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
    </h2>
  </body>
</html>

Answer 2

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;
}

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

    <body style = "text-align:center;">
<header>
  <h1> Clicker customer queue identify button</h1>
</header>
<center>
  <button  id="c" class="button" onclick="uppass(this)" style=" font-size: 16px; margin: 0 10px;"> Common </button>
    <button id="f" type="button" onclick="uppass(this)" style=" font-size: 16px; margin: 0 10px;"> Fast </button>
    <button id="p" type="button" onclick="uppass(this)" 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>

Answer 3

您可以通过this将元素作为参数传递给函数并获取参数的id 属性:

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

<!DOCTYPE HTML>
<html>

<head>
  <title>
    clicked button in JavaScript
  </title>
</head>

<body style="text-align:center;">
  <header>
    <h1> Clicker customer queue identify button</h1>
  </header>
  <center>
    <button id="c" class="button" onclick="uppass(this)" style=" font-size: 16px; margin: 0 10px;"> Common </button>
    <button id="f" type="button" onclick="uppass(this)" style=" font-size: 16px; margin: 0 10px;"> Fast </button>
    <button id="p" type="button" onclick="uppass(this)" 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 Clicker 客户队列识别按钮

Javascript Clicker customer queue identify buttons

html

javascript

jquery

button