Javascript 从输入中选择颜色后，如何使此按钮更改背景颜色？

从输入中选择颜色后，如何使此按钮更改背景颜色

var theInput=document.getElementById（“favColor”）；
var body=document.querySelector（“body”）；
颜色变量=输入值；
addEventListener（“change”，function（））{
body.style.background=输入值；
}，假）

点击我
您应该将单击事件附加到按钮
更改颜色
，然后在此事件中执行颜色更改，如：

  var button = document.querySelector("#changeColor");

  button.addEventListener("click", function() {
    body.style.background = theInput.value;
  }, false);

注意：表单中的按钮默认为提交按钮，因此您应该添加
type='button'
：

<button id="changeColor" type="button">Click me</button>

防止表单在单击后提交和页面刷新

希望这有帮助

工作片段：


var theInput=document.getElementById（“favColor”）；
var body=document.querySelector（“body”）；
var按钮=document.querySelector（“#changeColor”）；
addEventListener（“单击”，函数（）{
body.style.background=输入值；
}，假）

点击我
如果希望在用户输入颜色后立即更改按钮的颜色，请将事件侦听器从
change
更改为
keyUp
，如下所示：



点击我
var theInput=document.getElementById（“favColor”）；
var body=document.querySelector（“body”）；
颜色变量=输入值；
addEventListener（“keyup”，function（））{
document.getElementById（“changeColor”）.style.background=输入值；
}，假）；

var theInput=document.getElementById（“favColor”）；
var body=document.querySelector（“body”）；
颜色变量=输入值；
函数changeColor（）{
body.style.background=输入值；
}

单击“我”
现在您正在将事件侦听器附加到颜色选择器的
“更改”
事件。将事件更改为按钮的
“单击”
事件。此外，将属性
type=“button”
放在
上。大多数浏览器默认为
type=“submit”
，这将提交您的表单。
button.addEventListener("click", function(e) {
    e.preventDefault()

    body.style.background = theInput.value;
}, false);