0

I am trying to access the value of the buttons I have created in JavaScript but it keeps showing up as undefined.

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

console.log(button);


<div class="row">
   <div class="col">
       <button type="button" value="7">7</button>
    </div>
    <div class="col">
       <button type="button" value="8">8</button>
    </div>
    <div class="col">
       <button type="button" value="9">9</button>
    </div>
</div>
HannahO
  • 3
  • 2
  • 3
    [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/q/10693845) – VLAZ May 17 '21 at 19:42

5 Answers5

0

querySelectorAll returns an array-like group of elements, so to get value from all you need to do something like:

document.querySelectorAll("button").forEach(button => button.value)

Or for a specific one: document.querySelectorAll("button")[key].value

Pauline
  • 151
  • 1
  • 1
  • 5
-1

Note sure if you can give a value to a button..have you tried instead with a input?

Alessandro Boscato
  • 47
  • 2
  • 8
  • 1
    "*Note sure if you can give a value to a button*" yes you can. See [the allowed attributes of a button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) - `value` is the last one in the list (alphabetical order). – VLAZ May 17 '21 at 20:01
-1
const button = document.querySelector("button").value;

Seems to fix it, using querySelector rather than querySelectorAll

I'm guessing that it's because querySelectorAll returns a nodeList of the buttons and that list doesn't have the value property.

minecraaaft
  • 31
  • 4
-1

It looks like the issue that you are running into is that document.querySelectorAll returns a NodeList (kinda like an array of nodes, but with fewer helper methods attached), not the nodes themselves. If you want to access the values of the buttons, you'll need to specify the index of the node that you want:

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

console.log(button[0].value); // 7

console.log(button[1].value); // 8

console.log(button[2].value); // 9
Jonathan D B Van Schenck
  • 139
  • 4
  • 1
    "*returns an array of nodes*" it's not an array, it's a NodeList. – VLAZ May 17 '21 at 19:59
  • The problem is that it *isn't* an array. That term is very specific in JavaScript - it's not just any indexed structure, it's the array *class* that gives you access to methods like `.map()` or `.filter()` or `.sort()` etc. A NodeList has none of those. It has `.forEach()`, `.length`, and indexes for items. That's the end of the similarity. An object with indexes and `.length` is called [an array-like](https://stackoverflow.com/q/29707568/). Array-likes are not guaranteed to have any array methods but are easily convertible to arrays if needed. – VLAZ May 17 '21 at 20:12
  • That's both interesting and not particularly relevant to the OP's question. The point is that the function returns a 'listy thing' not the object itself. If the OP wanted to know the exact methods and attributes that the returned object had, they could have just googled it. – Jonathan D B Van Schenck May 17 '21 at 20:29
  • 1
    "*The point is that the function returns a 'listy thing' not the object itself.*" that is indeed the point. We often get the questions around here "why does `document.querySelectorAll("input").map(x => x.value)` not work" (or whatever other code that tries to treat the result of `querySelctorAll` as an array) it's usually because the OP has been told that the result is an array. Or sometimes that anything indexed is an array. That's why it's my hope here I saves a question in the future by being clear what is and isn't an array. – VLAZ May 17 '21 at 20:34
  • Cool, I updated the language a bit -- hopefully that's clearer – Jonathan D B Van Schenck May 17 '21 at 20:59
-1

document.querySelectorAll("button") will get you an array of buttons.

To access the value you will need to use array notation:

const button = document.querySelectorAll("button");
console.log(button[0].value);
console.log(button[1].value);
Walter
  • 108
  • 5