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 >
<p id="stuff">This text should change color to correspond with the pushed button</p>
</div>
<div id="color-field-field-link-color">
<button value="#5e0dac" color="#5e0dac" title="#5e0dac" style="background-color: rgb(94, 13, 172);"></button>
<button value="#fc0b22" color="#fc0b22" title="#fc0b22" style="background-color: rgb(252, 11, 34);"></button>
<button value="#1abe00" color="#1abe00" title="#1abe00" style="background-color: rgb(26, 190, 0);"></button>
<button value="#283ae5" color="#283ae5" title="#283ae5" style="background-color: rgb(40, 58, 229);"></button>
<button 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 >
<p>This text should change color to correspond with the pushed button</p>
</div>
<div id="color-field-field-link-color">
<button value="#5e0dac" color="#5e0dac" title="#5e0dac" style="background-color: rgb(94, 13, 172);"></button>
<button value="#fc0b22" color="#fc0b22" title="#fc0b22" style="background-color: rgb(252, 11, 34);"></button>
<button value="#1abe00" color="#1abe00" title="#1abe00" style="background-color: rgb(26, 190, 0);"></button>
<button value="#283ae5" color="#283ae5" title="#283ae5" style="background-color: rgb(40, 58, 229);"></button>
<button value="#000000" color="#000000" title="#000000" style="background-color: rgb(0, 0, 0);"></button>
</div>
Thanks for your time!
CodePudding user response:
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 >
<p>This text should change color to correspond with the pushed button</p>
</div>
<div id="color-field-field-link-color">
<button value="#5e0dac" color="#5e0dac" title="#5e0dac" style="background-color: rgb(94, 13, 172);"></button>
<button value="#fc0b22" color="#fc0b22" title="#fc0b22" style="background-color: rgb(252, 11, 34);"></button>
<button value="#1abe00" color="#1abe00" title="#1abe00" style="background-color: rgb(26, 190, 0);"></button>
<button value="#283ae5" color="#283ae5" title="#283ae5" style="background-color: rgb(40, 58, 229);"></button>
<button value="#000000" color="#000000" title="#000000" style="background-color: rgb(0, 0, 0);"></button>
</div>
<br>
<div>
<button value="#000000" color="#000000" title="#000000" style="background-color: rgb(0, 0, 0);"></button>
</div>