CODEWITHSUNDEEP
javascripthtml
user15795140
user15795140

Reputation:

Trying to change color for input using javascript

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>

Upvotes: 1

Views: 66

Answers (4)

UserOfStackOverFlow
UserOfStackOverFlow

Reputation: 108

Here is an speed alternative with jQuery:

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

Upvotes: 0

Dhananjay Yadav
Dhananjay Yadav

Reputation: 273

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>

Upvotes: 1

Lowgy
Lowgy

Reputation: 93

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>

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23510

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>

Upvotes: 1

Related Questions