0

Слева три кнопки. Я хочу чтобы нажимая на одну из этих кнопок цвет квадрата менялся на тот, который указан в самой кнопке. Каким должен быть код Javascript чтобы условия выполнялись. Желательно написать готовый код с объяснением каждой строки ( я сравнительно недавно заинтересовался языком программирования JS ). Ссылки на нужную информацию и комментарии будут очень кстати. Свою ссылку на исходный код html и css в песочнице codepen прикрепляю ниже.

.squere {
  position: absolute;
  margin-left: 55%;
  margin-top: 2%;
  background-color: white;
  padding: 5%;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.85), 0 10px 10px rgba(0, 0, 0, 0.32);
  background-color: white;
}

.btn1 {
  margin-left: 8%;
  position: relative;
  margin-left: 8%;
  box-shadow: 0 5px 0 #3C93D5;
  display: inline-block;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 22px;
  text-decoration: none;
  background: #55acee;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  transition: .3s;
}

.red {
  float: right;
  padding-left: 15px;
  color: red;
}

.btn2 {
  margin-left: 8%;
  position: relative;
  margin-left: 8%;
  box-shadow: 0 5px 0 #3C93D5;
  display: inline-block;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 22px;
  text-decoration: none;
  background: #55acee;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  transition: .3s;
}

.yellow {
  float: right;
  padding-left: 15px;
  color: yellow;
}

.btn3 {
  position: relative;
  margin-left: 8%;
  box-shadow: 0 5px 0 #3C93D5;
  display: inline-block;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 22px;
  text-decoration: none;
  background: #55acee;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  transition: .3s;
}

.green {
  float: right;
  padding-left: 15px;
  color: green;
}

.cnopocki {
  position: absolute;
  margin-left: 15%;
  margin-top: 0.8%;
  background-color: #006363;
  width: 430px;
  height: 220px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.85), 0 10px 10px rgba(0, 0, 0, 0.32);
}

body {
  color: #ee9e9;
}
<span>
        <span class="squere">Цвет</span>
</span>
<div class="cnopocki">
  <p>
    <button class="btn1"> Поменяй квадрат на <div class="red">красный</div> </button>
  </p>
  <p>
    <button class="btn2"> Поменяй квадрат на <div class="yellow"> желтый </div> </button>
  </p>
  <p>
    <button class="btn3"> Поменяй квадрат на <div class="green"> зеленый </div> </button>
  </p>
</div>

1

2 ответа 2

2

let btns = document.querySelectorAll(".btn");
// Собирает нумерованный список всех кнопок с class="btn"
// btns[0] — первая кнопка, btns[1] — вторая кнопка, btns[i] — i-тая кнопка.

let last_clicked = null;
// Пусть ссылка на последнюю кликнутую кнопку хранится в переменной.

for (let i = 0; i < btns.length; i++) {
  // Перебирает кнопки и на всех добавляет обработчик события,
  // Функция set_square_color будет запускаться при клике.
  btns[i].addEventListener("click", set_square_color);
}

function set_square_color() {
  let curr_clicked = this;
  // Обработчик клика привязывет ключевое слово `this` к текущей кликнутой кнопке.
  
  let box = document.querySelector(".square");
  // querySelectorAll дает список элементов,
  // querySelector — Первый подходящий элемент на странице.
  
  box.style.backgroundColor = curr_clicked.dataset.color;
  // в JS тире из стилей (background-color) заменяется большой буквой.
  // data-color → dataset.color, data-bubu → dataset.bubu
  // Можно назначить элементам кастомные атрибуты, и так получить к ним доступ.
  
  /*** Последующий кусок можно выкинуть */
  if (last_clicked) { // Есть предыдущая кликнутая кнопка?
    let txt = last_clicked.firstChild.textContent;
    // firstChild — текстовый узел `Поменяй квадрат на`
    
    last_clicked.firstChild.textContent = txt.replace("Поменял", "Поменяй");
  }
  
  let txt = curr_clicked.firstChild.textContent;
  curr_clicked.firstChild.textContent = txt.replace("Поменяй", "Поменял");
  
  last_clicked = curr_clicked;
  // Ссылка на текущую кликнутую кнопку сохраняется во внешнюю переменную.
}
.wrap {
  width: 430px;
  height: 220px;
  
  margin: 10px;
  padding: 10px;
  
  background-color: #066;
  box-shadow: 0 14px 28px #000d, 0 10px 10px #0002;
}

.square {
  width: 40px;
  height: 40px;
  
  margin: 10px;
  padding: 5px;
  
  background-color: white;
  box-shadow: 0 14px 28px #000d, 0 10px 10px #0002;
}

.btn {
  position: relative;
  display: inline-block;
  
  width: 90%;  
  margin: 5px;  
  padding: 10px 25px;
  
  border-radius: 5px;
  
  font-size: 22px;
  background-color: #5be;
  box-shadow: 0 14px 28px #0004, 0 10px 10px #0004;
  
  cursor: pointer;
}

.red {
  color: red;
}

.yellow {
  color: yellow;
}

.green {
  color: green;
}
<div class="square">Цвет</div>

<div class="wrap">
  <button class="btn" data-color="#f00">
    Поменяй квадрат на <span class="red">красный</span>
  </button>
  
  <button class="btn" data-color="#ff0">
    Поменяй квадрат на <span class="yellow"> желтый</span>
  </button>
  
  <button class="btn" data-color="#090">
    Поменяй квадрат на <span class="green"> зеленый</span>
  </button>
</div>

1

// Сохраняем ссылку на квадрат в переменную для дальнейших манипуляций
const square = document.querySelector('.squere');

// Функция, принимающая на вход цвет. В случае, если 
// параметр не передан, то значение по умолчанию - white
const setColor = (color = 'white') => {
  // устанавливаем цвет фона у квадрата
  square.style.backgroundColor = color;
}
.squere{
  position: absolute;
  margin-left:55%;
  margin-top:2%;
  background-color: white;
  padding: 5%; 
  box-shadow: 0 14px 28px rgba(0,0,0,0.85), 0 10px 10px rgba(0,0,0,0.32);
  background-color: white;
}

.btn1{
  margin-left: 8%;
  position: relative;
  margin-left: 8%;
  box-shadow:0 5px 0 #3C93D5;
  display: inline-block;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 22px;
  text-decoration: none;
  background: #55acee;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transition: .3s;
}
.red{
  float: right;
  padding-left: 15px;
  color:red;
}

.btn2{
  margin-left: 8%;
  position: relative;
  margin-left: 8%;
  box-shadow:0 5px 0 #3C93D5;
  display: inline-block;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 22px;
  text-decoration: none;
  background: #55acee;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transition: .3s;
}
.yellow{
  float: right;
  padding-left: 15px;
  color: yellow;
}

.btn3{
  position: relative;
  margin-left: 8%;
  box-shadow:0 5px 0 #3C93D5;
  display: inline-block;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 22px;
  text-decoration: none;
  background: #55acee;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transition: .3s;
}
.green{
   float: right;
  padding-left: 15px;
  color: green;
}

.cnopocki{
  position: absolute;
  margin-left:15%;
  margin-top:0.8%;
  background-color: #006363;
  width:430px;
  height:220px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.85), 0 10px 10px rgba(0,0,0,0.32);
}
body{
  color:#ee9e9;
}
<span>
        <span class="squere">Цвет</span>
    </span>
    <div class="cnopocki">
        <p>
      <button class="btn1" onclick="setColor('red')"> Поменяй квадрат на <div class="red">красный</div> </button>
        </p>
        <p>
      <button class="btn2" onclick="setColor('yellow')"> Поменяй квадрат на <div class="yellow"> желтый </div> </button>
    </p>
        <p>
       <button class="btn3" onclick="setColor('green')"> Поменяй квадрат на <div class="green"> зеленый </div> </button>
    </p>
    </div>

Браузерные события

Поиск элементов в DOM

4
  • Что я понял: Мы задали переменную const с именем square в документе html находим селектор по классу .squere. Далее мы создаем еще одну переменную const с именем setColor. На следующем этапе кода абсолютное непонимание происходящего ( => что значит этот знак ) непонятно как работает вторая строчка после знака = , по третей строке нужен детальный разбор. Я понимаю что мы как то лезем в css правила и меняем их во время нажатия мыши, но как именно работает строка не пойму
    – Evgeni
    2 янв 2021 в 13:47
  • => - это часть конструкции функции-стрелки. Т.к. мы в константу square поместили ссылку на сам элемент квадрата в DOM, то можем общаться к его свойствам. В том числе и стилям - square.style. Чтобы поменять цвет фона, задаём свойству backgroundColor нужное значение, переданное функции setColor. Значение передаётся при вызове функции по событию onclick, которые заданы для каждой кнопки в шаблоне: <button class="btn2" onclick="setColor('yellow')"> Поменяй квадрат на <div class="yellow"> желтый </div> </button> 2 янв 2021 в 14:22
  • С elem.style.backgroundColor = 'red'; мы меняем цвет фона квадрата. А как поменять цвет текста внутри квадрата?
    – Evgeni
    6 янв 2021 в 13:48
  • Используйсте свойство color - elem.style.color = 'white'; 7 янв 2021 в 9:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.