Javascript Clicker 客户队列识别按钮答案

【问题标题】：Javascript Clicker customer queue identify buttonsJavascript Clicker 客户队列识别按钮
【发布时间】：2021-07-13 14:18:13
【问题描述】：

我有下面的代码
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/上的代码

【问题讨论】：

标签： javascript html jquery button

【解决方案1】：

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>

【讨论】：

很酷，但我希望它只显示在屏幕上，就像上面朋友的回答一样。它正在打开一个新盒子，就像一个新标签一样。看看来自 ikhvjs 的回复。我不知道我是否能够正确地解释自己。
就是这样，完美。问题已解决，谢谢。

【解决方案2】：

您可以通过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>

【讨论】：

很酷，但我希望它只显示在屏幕上，就像下面朋友的回复一样。它正在打开一个新盒子，就像一个新标签一样。看看来自 ikhvjs 的回复。我不知道我是否能够正确地解释自己。

【解决方案3】：

您可以使用事件委托，它更实用，您可以在函数内部传递一个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>

【讨论】：