Question

0

80

Views

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>

7 months ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-13T10:12:55.055Z

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>

Answer 2 · 2022-07-13T10:12:55.062Z

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>

Answer 3 · 2022-07-13T10:12:55.068Z

Here is an speed alternative with jQuery:

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