更改背景颜色

我目前正在尝试使用该模板更改我所有页面中的背景颜色。在我的页脚中，我有一个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

来源

2016-01-06 Conor606

的容器是一个类，而不是一个ID。 –

提交表单时的默认行为是发布数据。为了防止这种情况，我们需要在表单上拨打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>

来源

2016-01-06 19:41:02

总是乐于提供帮助。不要忘记通过点击绿色复选标记图标 –

我们可以通过使用prompt存储变量内用户的选择。

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

document.body.style.backgroundColor = color;

来源

2016-01-06 19:39:48

这是你的工作代码：

<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>

来源

2016-01-06 20:03:57

来接受此答案，您还可以使用Cookie来设置颜色以便更好地使用... –

保存价值的六色这里是一个不错的主意。我希望这是你所期望的：

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

 
}

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

<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>

来源

2016-01-06 20:04:09 roshan

更改背景颜色

回答

相关问题