I've started coding and created a function so the background color changes to your preference but id like it to change the button color too so it looks better but nothing seems to work
This is all I've done so far
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>Id must be unique , so change it and you can change color for button too:
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>Here is solution: Pass the Object of element in function and set the value on click of button itself.
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>Here is an speed alternative with jQuery:
$("#identifier").css("background-color", "blue");