Javascript Изменить цвет родительского текста с помощью дочерней кнопки

Я хочу добавить кнопку к любым элементам div с именем класса «цвета». При нажатии кнопки цвет текста Родителя (нажатой кнопки) изменится на желаемый цвет. Он изменяет только последний элемент.

Вот что у меня есть до сих пор. https://codepen.io/i-empty/pen/mdpLNEB

var colors = document.querySelectorAll('.colors');

for (var i = 0; i < colors.length; i++) {
 var btn = document.createElement('button'); 
  btn.classList.add('button');
  btn.textContent = "Change";

  colors[i].append(btn);
  
}
  btn.addEventListener("click", ChangeColor);

// Change Colors
function ChangeColor() {
  for (var _ = 0; _ < colors.length; _++) {
    colors[_].style.color = "red";
  }
}
.button {
    background-color: red;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  bottom: 10px;
  float: right; 
  &:hover {
    cursor: pointer;
  }
  &:active {
    background-color: black;
    color: white;
  }
}
.colors {
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  width: 35%;
  margin: 10px 0;
  font-size: 20px;
  font-weight: bold;
  font-family: Sans-serif;
 
}
  <div class="colors">Hi</div>
  <div class="colors">Hello</div>
  <div class="colors">Goodbye</div>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
39
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Я сделал несколько незначительных изменений, которые на самом деле не требуются, но наиболее важным из них было добавление обработчика событий к вновь созданному элементу кнопки, внутри петли, и не только один раз в конце. Вот почему только ваша последняя кнопка запускала событие, меняющее цвета.

Вот мое решение:

let colors;

//init the gui once the document was loaded
document.addEventListener("DOMContentLoaded", function() {
  colors = document.querySelectorAll('.colors');
  init();
});

//Init the gui
function init(){ 
  //loop through the .colors divs
  for (let i = 0; i < colors.length; i++) {
    //add a new button to the current div
    let btn = document.createElement('button'); 
    btn.classList.add('button');
    btn.textContent = "Change";
    btn.addEventListener("click", ChangeColor);
    colors[i].append(btn);
  }
}

//Change text color to all .colors divs
function ChangeColor(event) {
  color = event.target.parentNode;
  if (color.style.color == "red")
      color.style.color = "black";
  else
      color.style.color = "red";
}
.button {
  background-color: red;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  bottom: 10px;
  float: right; 
 }
 
&:hover {
  cursor: pointer;
}

&:active {
  background-color: black;
  color: white;
}

.colors {
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  width: 35%;
  margin: 10px 0;
  font-size: 20px;
  font-weight: bold;
  font-family: Sans-serif;
 
}
<div class="colors">Hi</div>
<div class="colors">Hello</div>
<div class="colors">Goodbye</div>

Это меняет цвет для всех элементов div, а не только для элемента div, кнопка которого была нажата.

Andy 09.04.2022 14:46

вы использовали div цикла for, чтобы сделать эту функцию ... это не имело смысла, но если вы приложили столько усилий, возможно, на то была причина. Нет, это была ерунда :D Хорошо, я исправлю эту часть

Diego De Vita 09.04.2022 14:50

финальное обновление реализует логику, в которой кнопка вызывает изменение цвета только на своем собственном div. Если вы нажмете на него еще раз, он вернется к своему прежнему цвету.

Diego De Vita 09.04.2022 15:10

Поднимите свои кнопки. Добавьте прослушиватели событий ко всем из них, а затем, когда функция вызывается, найдите родительский узел элемента и добавьте к нему новый класс.

const colors = document.querySelectorAll('.colors');

for (var i = 0; i < colors.length; i++) {
  var btn = document.createElement('button');
  btn.classList.add('button');
  btn.textContent = "Change";
  colors[i].append(btn);
}

const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', changeColor, false);
});

// Change Colors
function changeColor() {
  this.parentNode.classList.add('red');
}
.button{background-color:red;color:#fff;padding:5px 10px;border-radius:5px;bottom:10px;float:right}
.colors{padding:10px;border:1px solid #000;border-radius:5px;width:55%;margin:10px 0;font-size:20px;font-weight:700;font-family:Sans-serif}
.red{color:red}
<div class="colors">Hi</div>
<div class="colors">Hello</div>
<div class="colors">Goodbye</div>

var colors = document.querySelectorAll('.colors');

const ChangeColor = event => {
    if (event.target.parentNode.style.color === "red") {
    
event.target.parentNode.style.color = "black"
    } else {
event.target.parentNode.style.color =  "red"
    }
}

for (var i = 0; i < colors.length; i++) {
 var btn = document.createElement('button'); 
  btn.classList.add('button');
  btn.textContent = "Change";

  colors[i].append(btn);
  
  btn.addEventListener("click", ChangeColor);
}
.button {
    background-color: red;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  bottom: 10px;
  float: right; 
  &:hover {
    cursor: pointer;
  }
  &:active {
    background-color: black;
    color: white;
  }
}
.colors {
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  width: 35%;
  margin: 10px 0;
  font-size: 20px;
  font-weight: bold;
  font-family: Sans-serif;
 
}
  <div class="colors">Hi</div>
  <div class="colors">Hello</div>
  <div class="colors">Goodbye</div>

Другие вопросы по теме