1

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>

Improve this question
1
  • 1
    If that's all you've done so far, of course "nothing seems to work" -- you've tried nothing. Try getting a reference to the button (note that ids must be unique to the document, and you have the same id on both the select and the button) and see where you can get to from there. Commented Sep 13, 2021 at 19:31

4 Answers 4

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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>

Improve this answer

1 Comment

thank you i added it to my code and it works
0

Like Heretic said, double check your id naming. The button and input fields have the same id when ids are unique.

<body>
    <script>
            function changeBG() {
                var selectedBGColor = document.getElementById("bgchoice").value;
                document.body.style.backgroundColor = selectedBGColor;
                document.getElementById("bgbutton").style.backgroundColor = selectedBGColor
            }
        </script>
<div id="app">
    <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="button" name="changecolour" value="Change Colour" class="btn btn-primary" onclick="changeBG()" id="bgbutton">
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>
Improve this answer

Comments

0

Here is an speed alternative with jQuery:

$("#identifier").css("background-color", "blue");
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.