DOM使用addEventListener改变字体颜色

Question

我是JS和HTML的初学者。我在使用addEventListener

改变字体颜色时遇到了一个问题这是我的部分HTML代码

<form>
<input type = 'color' class = 'color'>
</form>

这是我的js代码。

// this is for class color 
const color = document.querySelectorAll('.color');
// I have 2 div block which contains messages.
const showTextBox = document.querySelectorAll('.mtext1');
// for each message, they correspond to the different color boxes.
color.forEach((element, index) => {
element.addEventListener('click', function (e) {
console.log(e)
showTextBox[index].style.color = color[index].value;
})
});

我遇到的情况是，当我点击颜色框时，它会弹出调色板，然后你必须点击"还是为了选择颜色。然而，addEventListener只在第一次点击时可用。

我想也许我可以使用嵌套的addEventListener?或者javascript有一个更有效的方法来改变颜色动态(或响应)来解决双击的情况?

Answer 1

您可以尝试这个解决方案。输入事件，而不是点击.

const color = document.querySelectorAll('.color');
const showTextBox = document.querySelectorAll('.mtext1');
color.forEach((element, index) => {
element.addEventListener('input', function (e) {
showTextBox[index].style.color = element.value;
})
});