使用沒有onclick屬性的按鈕觸發javascript

編輯：擴展 CJMarkham 的答案，我能夠通過在他的答案中添加幾行 javascript 來實作我所需要的。

這是最終的解決方案：

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>

原文：我有一個有五個<button>s的表單元素。由于程式限制，我無法修改任何<button>屬性。所以我不能為每個按鈕添加onclick、id或class屬性。

單擊按鈕時，我需要將其十六進制值作為行內樣式添加到頁面上的另一個元素中。

由于 javascript 知識有限，我知道的唯一方法是將onclick屬性附加到每個<button>. 但是我無法修改屬性，所以我需要另一種方法來定位按鈕。

這是設定：

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>

謝謝你的時間！

uj5u.com熱心網友回復：

您可以使用addEventListenerfor 每個按鈕，當單擊按鈕時會觸發回呼函式。從那里，您可以獲得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>

標籤：javascript html 形式 按钮 按钮点击

上一篇：使用S3元資料發布AWSLambda的Terraform

下一篇：如何使用javascript在網頁上一次只訪問一個表單