Question

我想通过单击具有相同类名的按钮来获取值，但是每当我单击按钮时，它都显示未定义。

var clr;
const btn = document.querySelectorAll('.color');

function myFunction() {

  for (var i = 0; i < btn.length; i++) {
    clr = btn[i].value;
    console.log(clr);
  }
}

<div class="color">
  <button class="btn" value="#BADA55" onclick="myFunction()"> Yellow </button>
  <button class="btn" value="#10A426" onclick="myFunction()"> Green </button>
  <button class="btn" value="#8787DE" onclick="myFunction()"> Purple </button>
</div>

Answer 1

const btn = document.querySelectorAll('.color');获取div而不是按钮。将其更改为const btn = document.querySelectorAll('.btn');：

var clr;
const btn = document.querySelectorAll('.btn');
function myFunction() {
  for (var i = 0; i < btn.length; i++) {
    clr = btn[i].value;
    console.log(clr);
  }
}

<div class="color">
  <button class="btn" value="#BADA55" onclick="myFunction()"> Yellow </button>
  <button class="btn" value="#10A426" onclick="myFunction()"> Green </button>
  <button class="btn" value="#8787DE" onclick="myFunction()"> Purple </button>
</div>

如果只希望单击按钮中的值，则将代码更改为

function myFunction(btn) {
  console.log(btn.value);
}

<div class="color">
  <button class="btn" value="#BADA55" onclick="myFunction(this)"> Yellow </button>
  <button class="btn" value="#10A426" onclick="myFunction(this)"> Green </button>
  <button class="btn" value="#8787DE" onclick="myFunction(this)"> Purple </button>
</div>

Answer 2

以这种方式进行操作，它将为您提供准确的结果

    function myFunction(event) {
        clr = event.target.value;
        console.log(clr);
    }

    <div class="color">
      <button class="btn" value="#BADA55" onclick="myFunction(event)"> Yellow </button>
      <button class="btn" value="#10A426" onclick="myFunction(event)"> Green </button>
      <button class="btn" value="#8787DE" onclick="myFunction(event)"> Purple </button>
    </div>

Answer 3

第一：脚本应该在哪里编写脚本（没有内联处理程序）。因此，将事件侦听器添加到document，并让其检查target（单击的元素）是否具有类名btn。在这种情况下：使用btn遍历具有className Array.from(document.querySelectorAll(".btn"))（Array.forEach）的元素数组以显示这些元素的值。

document.addEventListener("click", myFunction);

function myFunction(evt) {
  console.clear();
  if (evt.target.classList.contains("btn")) {
    // a button.btn was clicked, so
    let report = `You clicked button with value ${evt.target.value}. Other .btn values:`;
    let values = [];
    Array.from(document.querySelectorAll(".btn"))
      .forEach(val => val !== evt.target && values.push(val.value));
    console.log(`${report} ${values.join(", ")}`);
  }
}

<div class="color">
  <button class="btn" value="#BADA55"> Yellow </button>
  <button class="btn" value="#10A426"> Green </button>
  <button class="btn" value="#8787DE"> Purple </button>
</div>

从具有相同类名的按钮获取不同的值

3 个答案: