Javascript 按钮功能一次

因此，我试图创建一个页面，人们可以使用colorPicker更改背景。它确实有效，只有当我更改它时，我才能在不刷新页面的情况下再次更改它。例如，我将BGCR更改为红色，但要将其更改为黄色，我必须刷新页面。那我该怎么做才能让它工作呢？代码如下：

const color=document.getElementById（'colorPick'）.value
document.getElementById（'changeColor'）。onclick=changeCol
函数changeCol（）{
document.body.style.backgroundColor=颜色
}

---

当您像这样访问

颜色时（代码下方），当您从
颜色选择器更新颜色时，其值不会发生更改

const color = document.getElementById('colorPick').value

相反，您可以先访问颜色元素，如下所示：

const color = document.getElementById('colorPick')

然后使用
color.value
更新背景色


const color=document.getElementById（'colorPick'））
document.getElementById（'changeColor'）。onclick=changeCol
函数changeCol（）{
document.body.style.backgroundColor=color.value
}

当你写：

const color = document.getElementById('colorPick').value;

您将立即获取颜色值，而不是缓存元素，这意味着您不能再次使用它

相反，你应该：

const color = document.getElementById('colorPick');

在函数中，只需将
color.value
指定给背景


const color=document.getElementById（'colorPick'）；
document.getElementById（'changeColor'）。onclick=changeCol；
函数changeCol（）{
document.body.style.backgroundColor=color.value；
}
作为第二种解决方案，如果需要，您可以删除不需要更改颜色的按钮


const color=document.getElementById（'colorPick'）；
函数changeCol（）{
document.body.style.backgroundColor=color.value；
}
您好。是的，行得通。但是这段代码在HTML文件中。我的代码应该在JS文件中。好的，我已经更新了答案。只需更改JS代码的这一部分。@Sureshmans请添加一些解释，代码本身不被认为是有效的答案。@MichaelRovinsky感谢您的反馈。这将帮助我写出更好的答案。事实上，这很有效。谢谢