How to get the value of a button in JavaScript

If you google “how to get the value of a button in JavaScript”, you’ll often see code like this:

<button type="button" name="button1" value="Button 1">
document.getElementById("button1").value

It’s simple. You just get the value of the button object.

However, in real cases, it’s not always this simple. For example, you might manipulate the DOM with JSON returned from the server, and when you click a button, you want to delete some data, etc.

So, this time, I’ll show how to get the value of multiple buttons.

HTML part

First, create the front:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <title>Button Click | example-code</title>
  </head>
  <body>
    <button class="button" value="1">1</button>
    <button class="button" value="2">2</button>
  </body>
  <script src="../JavaScript/buttonClick.js"></script>
</html>

JavaScript implementation

If you want to get the value of button1 and button2, you can’t use id, so use querySelectorAll.

Here’s the complete code:

document.querySelectorAll('.button').forEach(function (button) {
	button.addEventListener('click', {value: `${button.value}`, handleEvent: onClickButton});
})

function onClickButton() {
	console.log(`${this.value} was clicked`)
}

First, document.querySelectorAll. If you write it like this, it won’t work.

document.getElementById("button")
const button = document.querySelectorAll('.button')
button.addEventListener('click', onClickButton);

Looking at the error message:

Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function
at Object.<anonymous>

document.querySelectorAll returns a NodeList object.

This was the cause of the error.

addEventListener is a method of the EventTarget object, but the object obtained with querySelectorAll is a NodeList object.

To use addEventListener, you need to use the forEach() method, as mentioned in the documentation.

Next, the problem is how to pass arguments to addEventListener.

First, I thought I could just pass it as an argument, so I wrote the following (which doesn’t work correctly).

const button = document.querySelectorAll('.button').forEach(function (button) {
	button.addEventListener('click', onClickButton(button.value));
})

function onClickButton(e) {
	console.log(`${e} was clicked`)
}

The result. It runs even though I haven’t clicked…

1 was clicked
2 was clicked

Since it’s an error, I read the official documentation.

You can specify a callback function for the event listener, but you can also specify an object that implements EventListener, in which case the handleEvent() method of that object will function as the callback function.

So, this is how you do it:

	button.addEventListener('click', {value: `${button.value}`, handleEvent: onClickButton});

JavaScript is still deep and profound.

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

Amazon

楽天