Trigger javascript with buttons without onclick attribute

Question

EDIT: Expanding on CJMarkham's answer, I was able to achieve what I needed by adding a couple of lines of javascript to his answer.

Here's the final solution:

const buttons = document.querySelectorAll('button')

buttons.forEach((button) => {
  button.addEventListener('click', (e) => {
    const hex = e.currentTarget.value
    const p = document.getElementById("stuff");
    p.style.color = hex;
  })
})

button {height: 10px; cursor: pointer;}

<div class="container">
<p id="stuff">This text should change color to correspond with the pushed button</p>
</div>
<div class="color-field-widget-box-form" id="color-field-field-link-color">
<button class="color_field_widget_box__square active" value="#5e0dac" color="#5e0dac" title="#5e0dac" style="background-color: rgb(94, 13, 172);"></button>
<button class="color_field_widget_box__square" value="#fc0b22" color="#fc0b22" title="#fc0b22" style="background-color: rgb(252, 11, 34);"></button>
<button class="color_field_widget_box__square" value="#1abe00" color="#1abe00" title="#1abe00" style="background-color: rgb(26, 190, 0);"></button>
<button class="color_field_widget_box__square" value="#283ae5" color="#283ae5" title="#283ae5" style="background-color: rgb(40, 58, 229);"></button>
<button class="color_field_widget_box__square" value="#000000" color="#000000" title="#000000" style="background-color: rgb(0, 0, 0);"></button>
</div>

ORIGINAL: I have a form element with five <button>s. Because of program restrictions, I'm unable to modify any of the <button> attributes. So I can't add onclick, id, or class attributes to each button.

When a button is clicked, I need its hexadecimal value to be added as an inline style to another element on the page.

With limited javascript knowledge, the only way I know to do this is with onclick attributes attached to each <button>. But I'm unable to modify the attributes, so I need an alternative method to target the buttons.

Here's the setup:

button {height: 10px; cursor: pointer;}

<div class="container">
<p>This text should change color to correspond with the pushed button</p>
</div>
<div class="color-field-widget-box-form" id="color-field-field-link-color">
<button class="color_field_widget_box__square active" value="#5e0dac" color="#5e0dac" title="#5e0dac" style="background-color: rgb(94, 13, 172);"></button>
<button class="color_field_widget_box__square" value="#fc0b22" color="#fc0b22" title="#fc0b22" style="background-color: rgb(252, 11, 34);"></button>
<button class="color_field_widget_box__square" value="#1abe00" color="#1abe00" title="#1abe00" style="background-color: rgb(26, 190, 0);"></button>
<button class="color_field_widget_box__square" value="#283ae5" color="#283ae5" title="#283ae5" style="background-color: rgb(40, 58, 229);"></button>
<button class="color_field_widget_box__square" value="#000000" color="#000000" title="#000000" style="background-color: rgb(0, 0, 0);"></button>
</div>

Thanks for your time!

Cjmarkham · Accepted Answer · 2021-12-30 19:42:08Z

1

You can use addEventListener for each button, which will trigger the callback function when a button is clicked. From there, you can get the value.

const container = document.querySelector('#color-field-field-link-color')
const buttons = container.querySelectorAll('button')


buttons.forEach((button) => {
  button.addEventListener('click', (e) => {
    const hex = e.currentTarget.value
    console.log(hex) // do something with hex
  })
})

button {height: 10px; cursor: pointer;}

<div class="container">
<p>This text should change color to correspond with the pushed button</p>
</div>
<div class="color-field-widget-box-form" id="color-field-field-link-color">
<button class="color_field_widget_box__square active" value="#5e0dac" color="#5e0dac" title="#5e0dac" style="background-color: rgb(94, 13, 172);"></button>
<button class="color_field_widget_box__square" value="#fc0b22" color="#fc0b22" title="#fc0b22" style="background-color: rgb(252, 11, 34);"></button>
<button class="color_field_widget_box__square" value="#1abe00" color="#1abe00" title="#1abe00" style="background-color: rgb(26, 190, 0);"></button>
<button class="color_field_widget_box__square" value="#283ae5" color="#283ae5" title="#283ae5" style="background-color: rgb(40, 58, 229);"></button>
<button class="color_field_widget_box__square" value="#000000" color="#000000" title="#000000" style="background-color: rgb(0, 0, 0);"></button>
</div>
<br>
<div>
  <button class="color_field_widget_box__square" value="#000000" color="#000000" title="#000000" style="background-color: rgb(0, 0, 0);"></button>
</div>

edited Dec 30, 2021 at 19:42

answered Dec 30, 2021 at 19:22

Cjmarkham

9,7336 gold badges52 silver badges85 bronze badges

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

3 Comments

cofihouse Over a year ago

Nice solution! I'll try this on for size. Would it be possible to target just buttons inside of a container by targeting the container's ID? My form may have other buttons which I wouldn't want the function applied to.

Cjmarkham Over a year ago

Sure, I've updated the answer to add a new button and make sure that only the buttons in the div with id color-field-field-link-color are targeted.

cofihouse Over a year ago

Beautiful! Really appreciate it. I was able to get this working and have updated the original post.

Collectives™ on Stack Overflow

Trigger javascript with buttons without onclick attribute

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related