Comencé a codificar y creé una función para que el color de fondo cambie según sus preferencias, pero también me gustaría cambiar el color del botón para que se vea mejor, pero nada parece funcionar.
Esto es todo lo que he hecho hasta ahora
function changeBG() { var selectedBGColor = document.getElementById("bgchoice").value; document.body.style.backgroundColor = selectedBGColor; } <section class="no-padding-bottom"> <div class="container"> <div class="card"> <div class="card-body"> <h5 class="card-title">Change Colour</h5> <div class="form-group"> <select id="bgchoice" name="colour" class="form-control"> <option value="red">preset</option> <option value="cyan">Cyan</option> <option value="green">Green</option> <option value="pink">Pink</option> <option value="blue">Sea</option> <option value="violet">Violet</option> </select> </div> <div class="form-group"> <input type="submit" name="changecolour" value="Change Colour" class="btn btn-primary" onclick="changeBG()" id="bgchoice"> </div> </form> </div> </div> </div> </section>La identificación debe ser única, así que cámbiela y también puede cambiar el color del botón:
function changeBG() { let selectedBGColor = document.querySelector("#bgchoice").value; document.body.style.backgroundColor = selectedBGColor; document.querySelector("#btnbgchoice").style.backgroundColor = selectedBGColor } <section class="no-padding-bottom"> <div class="container"> <div class="card"> <div class="card-body"> <h5 class="card-title">Change Colour</h5> <div class="form-group"> <select id="bgchoice" name="colour" class="form-control"> <option value="red">preset</option> <option value="cyan">Cyan</option> <option value="green">Green</option> <option value="pink">Pink</option> <option value="blue">Sea</option> <option value="violet">Violet</option> </select> </div> <div class="form-group"> <input type="submit" name="changecolour" value="Change Colour" class="btn btn-primary" onclick="changeBG()" id="btnbgchoice"> </div> </div> </div> </div> </section>Aquí está la solución: pase el Objeto del elemento en la función y establezca el valor al hacer clic en el botón.
function changeBG(ele) { ele.style.backgroundColor = document.getElementById("bgchoice").value; } <section class="no-padding-bottom"> <div class="container"> <div class="card"> <div class="card-body"> <h5 class="card-title">Change Colour</h5> <div class="form-group"> <select id="bgchoice" name="colour" class="form-control"> <option value="red">preset</option> <option value="cyan">Cyan</option> <option value="green">Green</option> <option value="pink">Pink</option> <option value="blue">Sea</option> <option value="violet">Violet</option> </select> </div> <div class="form-group"> <input type="submit" name="changecolour" value="Change Colour" class="btn btn-primary" onclick="changeBG(this)" id="bgchoice"> </div> </form> </div> </div> </div> </section>Aquí hay una alternativa de velocidad con jQuery:
$("#identifier").css("background-color", "blue");