在 JavaScript 中获取按钮的值

如何解决在 JavaScript 中获取按钮的值

我在尝试获取按钮的值时遇到问题。目前它将调用我单击的按钮，但表示该值未定义。我尝试使用 this 并尝试使用 JQuery 的 val()。如果可能的话，我希望答案是普通的 JavaScript。

相关代码如下。

var grabButton = document.querySelectorAll("button");

function checkLetter()
{
    // Pull the value of the button and declare it as letter
    letter = this.grabButton.value;
    console.log(letter);
}

grabButton.forEach(button => {
    button.addEventListener("click",function() { checkLetter() });
});

<div id="letters">
        <button class="letter" value="A">A</button>
        <button class="letter" value="B">B</button>
        <button class="letter" value="C">C</button>
        <button class="letter" value="D">D</button>
        <button class="letter" value="E">E</button>
        <button class="letter" value="F">F</button>
        <button class="letter" value="G">G</button>
        <button class="letter" value="H">H</button>
        <button class="letter" value="I">I</button>
        <button class="letter" value="J">J</button>
        <button class="letter" value="K">K</button>
        <button class="letter" value="L">L</button>
        <button class="letter" value="M">M</button>
        <button class="letter" value="N">N</button>
        <button class="letter" value="O">O</button>
        <button class="letter" value="P">P</button>
        <button class="letter" value="Q">Q</button>
        <button class="letter" value="R">R</button>
        <button class="letter" value="S">S</button>
        <button class="letter" value="T">T</button>
        <button class="letter" value="U">U</button>
        <button class="letter" value="V">V</button>
        <button class="letter" value="W">W</button>
        <button class="letter" value="X">X</button>
        <button class="letter" value="Y">Y</button>
        <button class="letter" value="Z">Z</button>
    </div>

解决方法

const grabButton = document.querySelectorAll("button");

function checkLetter() {
  const letter = this.value;
  console.log(letter);
}

grabButton.forEach(button => button.addEventListener("click",checkLetter));

<div id="letters">
  <button class="letter" value="A">A</button>
  <button class="letter" value="B">B</button>
  <button class="letter" value="C">C</button>
  <button class="letter" value="D">D</button>
  <button class="letter" value="E">E</button>
  <button class="letter" value="F">F</button>
  <button class="letter" value="G">G</button>
  <button class="letter" value="H">H</button>
  <button class="letter" value="I">I</button>
  <button class="letter" value="J">J</button>
  <button class="letter" value="K">K</button>
  <button class="letter" value="L">L</button>
  <button class="letter" value="M">M</button>
  <button class="letter" value="N">N</button>
  <button class="letter" value="O">O</button>
  <button class="letter" value="P">P</button>
  <button class="letter" value="Q">Q</button>
  <button class="letter" value="R">R</button>
  <button class="letter" value="S">S</button>
  <button class="letter" value="T">T</button>
  <button class="letter" value="U">U</button>
  <button class="letter" value="V">V</button>
  <button class="letter" value="W">W</button>
  <button class="letter" value="X">X</button>
  <button class="letter" value="Y">Y</button>
  <button class="letter" value="Z">Z</button>
</div>