如何在js中选择具有相同类名的按钮列表中的单击按钮？

Question

我正在使用一些 javascript 代码，并且我有一个具有相同类名的按钮列表，但我想知道单击其中的哪个按钮才能获取值。我怎样才能用 vanilla js 做到这一点？这是示例代码

<button onclick="chooseRating()" id="rateBtn" class="rateBtn" value="1">1</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="2">2</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="3">3</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="4">4</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="5">5</button>

，我尝试的js代码是

const rateBtn = document.getElementsByClassName("rateBtn");
function chooseRating() {
    for (rate in rateBtn) {
        console.log(rateBtn[rate]);
        if (rateBtn[rate].clicked === true) {
            rating = rateBtn[rate].value;
            console.log(rating);
            //shows 5 don't know why
        }
    }
}

Answer 1

您首先应该为每个按钮定义一个唯一的id。

此外，您可以将 HTML 元素作为参数传递给 onClick 方法。

例如：

<button onclick="chooseRating(this)" id="rateBtn1" class="rateBtn" value="1">1</button>
<button onclick="chooseRating(this)" id="rateBtn2" class="rateBtn" value="2">2</button>
<button onclick="chooseRating(this)" id="rateBtn3" class="rateBtn" value="3">3</button>
<button onclick="chooseRating(this)" id="rateBtn4" class="rateBtn" value="4">4</button>
<button onclick="chooseRating(this)" id="rateBtn5" class="rateBtn" value="5">5</button>

然后您可以从普通的 javascript 代码获取 HTML 按钮的 ID 和值：

function chooseRating(e) {
    console.log(`my ID is ${e.id}, and my value is ${e.value}`);
}

Answer 2

您只需将变量传递给每个按钮中的函数调用即可。
例子：
onclick="myFunction(variable)"

HTML 文件：

   <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="1">
    1
  </button>
  <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="2">
    2
  </button>
  <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="3">
    3
  </button>
  <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="4">
    4
  </button>
  <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="5">
    5
  </button>

JavaScript 文件：

function myFunction(val) { console.log(val); }