Изменение фоновых цветов

В настоящее время я пытаюсь изменить цвет фона на всех моих страницах с помощью шаблона. В моем нижнем колонтитуле у меня есть элемент 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

Контейнер представляет собой класс, а не идентификатор. –

Поведение по умолчанию при отправке формы заключается в публикации данных. Чтобы этого не случилось, нам нужно позвонить 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 для установки цвета для лучшего использования ... –

Сохранение цветов Hexa в стоимости является хорошей идеей здесь. Я надеюсь, что это то, что вы ожидали:

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

Изменение фоновых цветов

ответ

Смежные вопросы