Getting the value from HTML into javascript

Question

I'm not entirely certain if what I'm trying to do may be possible. However,

<button class = "numbers" value=1>1</button>
all the way to 
<button class = "numbers" value=9>9</button>

For example, I have 1 all the way to 9, when one of these buttons were to be clicked, I want the values to be console logged. So, if I clicked the number 1 for example, it would just console log 1 as an int using the value of that specific button, without having to specify each button individually.

Thank you for helping in advance!

I don't think buttons really have a "value" attribute, but you could use <input type='button' value='1' />. You'll need to assign an event listener for the click event. I'd definitely look for a JS tutorial for this. — mykaf
– mykaf, Commented Aug 3, 2022 at 20:21
@user1599011 The <button> element has a value attribute and property. — Emiel Zuurbier
– Emiel Zuurbier, Commented Aug 3, 2022 at 20:22
@user1599011 Ah, is setting a value on button, not a good practice? Should I use input type instead? — user2152229
– user2152229, Commented Aug 3, 2022 at 20:36
I was wrong; I don't use it and didn't realize it was valid. — mykaf
– mykaf, Commented Aug 3, 2022 at 20:37

CertainPerformance · Accepted Answer · 2022-08-03 20:22:55Z

1

Use event delegation. Add one event listener to the container of the buttons, and on click, if the target (the innermost clicked element) was a button that matches .numbers, log the value.

document.querySelector('.container').addEventListener('click', ({ target }) => {
  if (!target.matches('.numbers')) return;
  console.log(target.value);
});

<div class="container">
  <button class = "numbers" value=1>1</button>
  <button class = "numbers" value=9>9</button>
</div>

answered Aug 3, 2022 at 20:22

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2152229 Over a year ago

Ahh, this is what I originally thought to use event targets with a container. Thank you! :)

user2152229 Over a year ago

Ah, Event delegation and Event propagation. I'll read up on both of these again.

Collectives™ on Stack Overflow

Getting the value from HTML into javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related