Question

我目前正在尝试使用模板更改所有页面中的背景颜色。在我的页脚中，我有一个html select元素。我尝试使用JavaScript让用户选择颜色，然后更新它。然而，它根本没有更新颜色。你能看看我的代码并告诉我我错过了什么，非常感谢！

HTML：

<form id="frmAccess" onClick="changeBackground()">
  <select id="colourSelected" name="backgroundColour">
    <option value="Yellow">Yellow</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
    <option value="Pink">Pink</option>
    <option value="White">White/Default</option>
  </select>
  <input type="submit" value="Update Colour"/>
</form>

CSS：

.container {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #FFF;
    width: 960px;
    margin: 0 auto;
    padding-top: 0;
}

.containerYellow {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #FF6;
    width: 960px;
    margin: 0 auto;
    padding-top: 0;
}

.containerGreen {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #3F9;
    width: 960px;
    margin: 0 auto;
    padding-top: 0;
}

.containerBlue {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #0CF;
    width: 960px;
    margin: 0 auto;
    padding-top: 0;
}

.containerPink {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #FCF;
    width: 960px;
    margin: 0 auto;
    padding-top: 0;
}

JavaScript的：

function changeBackground()
{
    var selectedColour = document.getElementById('colourSelected').value;

    switch(selectedColour)
    {
        case Yellow: document.getElementById('container').className = "containerYellow";
        break;
        case Green: document.getElementById('container').className = "containerGreen";
        break;
        case Blue: document.getElementById('container').className = "containerBlue";
        break;
        case Pink: document.getElementById('container').className = "containterPink";
        break;
        case White: document.getElementById('container').className = "container";
    }//end switch

}//end function

Answer 1

提交表单时的默认行为是发布数据。为防止这种情况，我们需要在表单上调用event.preventDefault()。在监听表单元素上的submit事件后调用它。

查看代码段。

var updateColor = document.getElementById("colour-update");
var form = document.getElementById("frmAccess");

form.addEventListener("submit", function(event) {
    event.preventDefault();
    var select = document.getElementById("colourSelected");
    document.body.style.backgroundColor = select.value;
});

    <form id="frmAccess" onClick="changeBackground()">
            <select id="colourSelected" name="backgroundColour">
                <option value="Yellow">Yellow</option>
                <option value="Green">Green</option>
                <option value="Blue">Blue</option>
                <option value="Pink">Pink</option>
                <option value="White">White/Default</option>
             </select>
             <input type="submit" id="colour-update" value="Update Colour"/>
        </form>

Answer 2

我们可以使用prompt将用户的选择存储在变量中。

var color = prompt("select a color");

document.body.style.backgroundColor = color;

Answer 3

这是您的工作代码：

<html>

<body id="container">
<style>
.container {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #FFF;
    width: 960px;
    margin: 0 auto;
    padding-top: 0;
}

.containerYellow {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #FF6;
    width: 960px;
    margin: 0 auto;
    padding-top: 0;
}

.containerGreen {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #3F9;
    width: 960px;
    margin: 0 auto;
    padding-top: 0;
}

.containerBlue {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #0CF;
    width: 960px;
    margin: 0 auto;
    padding-top: 0;
}

.containerPink {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #FCF;
    width: 960px;
    margin: 0 auto;
    padding-top: 0;
}
</style>
    <select id="colourSelected" name="backgroundColour">
        <option value="Yellow">Yellow</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
        <option value="Pink">Pink</option>
        <option value="White">White/Default</option>
     </select>
     <input type="button" value="Update Colour" onClick="changeBackground()"/>

<script>
function changeBackground()
{  
    var selectedColour = document.getElementById('colourSelected').value;

    switch(selectedColour)  
    {
        case "Yellow": document.getElementById('container').setAttribute("class","containerYellow");
        break;
        case "Green": document.getElementById('container').setAttribute("class","containerGreen");
        break;
        case "Blue": document.getElementById('container').setAttribute("class","containerBlue");
        break;
        case "Pink": document.getElementById('container').setAttribute("class","containterPink");
        break;
        case "White": document.getElementById('container').setAttribute("class","container");
    }//end switch

}//end function
</script>
   </body>
   </html>

Answer 4

将颜色hexa存储在值中是一个好主意。我希望这是你的期望：

＆＃13;

function changeBackground() {
  document.getElementById('container').style.backgroundColor = event.srcElement.value;

}

＆＃13;

#container {
  font-family: Verdana, Geneva, sans-serif;
  background-color: #FFF;
  width: 960px;
  margin: 0 auto;
  padding-top: 0;
  height: 100px;
}

＆＃13;

<div id="container">

</div>
<form id="frmAccess">
  <select id="colourSelected" name="backgroundColour" onchange="changeBackground()">
    <option selected disabled="" value="">Please select a color</option>
    <option value="#fff400">Yellow</option>
    <option value="#09ff00">Green</option>
    <option value="#0038ff">Blue</option>
    <option value="#ff00f4">Pink</option>
    <option value="#ffffff">White/Default</option>
  </select>
</form>

＆＃13;

改变背景颜色

4 个答案: