Измените цвет фона на клик на множественный выбор цвета, используя jquery

Question

Я пытаюсь добавить несколько вариантов цвета? Как я могу сделать это с HTML и CSS? я не знаю, как правильно добавить несколько цветов, вот мои коды

$(document).ready(function() {
      $('#btn').click(function() {
        $('body').css('background', '#ff0000', '#80ff33');
      });

body {
  height: ;
  background: #D8D8D8;
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

#btn {
  margin-left: 550px;
  width: 200px;
  height: 100px;
  font-size: 2em;
  border-radius: 10px;
  background: #ffffff;
}

#btn:hover {
  background: #ff0000;
  background: #80ff33;
  color: #ffffff;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn">CLICK ME!</button>

Answer 1

Вы неправильно закрыли свою функцию

$(document).ready(function() {
  $('#btn').click(function() {
    $('body').css('background', '#ff0000', '#80ff33');
  });
});

демо:

$(document).ready(function() {
  $('#btn').click(function() {
    $('body').css('background', '#ff0000', '#80ff33');

  });

});

body {
    height: ;
    background: #D8D8D8;
}

.text {
    color: #686868; 
    font-family: arial;
    font-size: 2em;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

#btn {
    margin-left: 550px;
    width: 200px;
    height: 100px;
    font-size: 2em;
    border-radius: 10px;
    background: #ffffff;
}

#btn:hover {
    background: #ff0000;
    background: #80ff33 ;
    color: #ffffff;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn">CLICK ME!</button>

---

Вы можете использовать несколько методов, один из которых - обновить пользовательское свойство css

Возможный пример из data-attribute, так что вы можете легко добавить столько цветов кнопок, сколько вам потребуется sh:

• javascript версия

DEMO или фрагмент ниже

for (let e of document.querySelectorAll("button")) {
  cust = e.dataset.bgcolor;
  e.style.background = cust;
  e.textContent = cust;
  e.addEventListener("click", function() {
    cust = e.dataset.bgcolor;
    document.documentElement.style.setProperty("--bgColor", cust);

  });
}

html {
  background: #D8D8D8;
}

body {
  margin: 0;
  height: 100vh;
  background: var(--bgColor);
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  width: 200px;
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
}

<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<div class="grid">
  <button data-bgcolor="orange">bgcolor:</button>
  <button data-bgcolor="white">bgcolor:</button>
  <button data-bgcolor="lightblue">bgcolor:</button>
  <button data-bgcolor="lightgreen">bgcolor:</button>
  <button data-bgcolor="brown">bgcolor:</button>

• jQuery эквивалентный фрагмент:

$("button").each(function() {
  bg = $(this).data("bgcolor");
  $(this).css("background", bg);
  $(this).html(bg);
  $(this).click(function() {
    bg = $(this).data("bgcolor");
    $("html").css("--bgColor", bg);
  });
});

html {
  background: #D8D8D8;
}

body {
  margin: 0;
  height: 100vh;
  background: var(--bgColor);
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  width: 200px;
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<div class="grid">
  <button data-bgcolor="orange">bgcolor:</button>
  <button data-bgcolor="white">bgcolor:</button>
  <button data-bgcolor="lightblue">bgcolor:</button>
  <button data-bgcolor="lightgreen">bgcolor:</button>
  <button data-bgcolor="brown">bgcolor:</button>

Answer 2

$(document).ready(function() {
      $('#btn').click(function() {
        $('body').css('background', '#ff0000', '#80ff33');
      });
});

body {
  height: ;
  background: #D8D8D8;
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

#btn {
  margin-left: 550px;
  width: 200px;
  height: 100px;
  font-size: 2em;
  border-radius: 10px;
  background: #ffffff;
}

#btn:hover {
  background: #ff0000;
  background: #80ff33;
  color: #ffffff;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn">CLICK ME!</button>

Answer 3

Вы можете изменить цвет тела при клике с этим при событии клика

body {
    height: ;
    background: #D8D8D8;
}

.text {
    color: #686868; 
    font-family: arial;
    font-size: 2em;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

#btn {
    margin-left: 550px;
    width: 200px;
    height: 100px;
    font-size: 2em;
    border-radius: 10px;
    background: #ffffff;
}

#btn:hover {
    background: #ff0000;
    background: #80ff33 ;
    color: #ffffff;
}

</script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn" onclick="document.body.style.backgroundColor = 'green';">Click Me</button>