Quiero agregar un botón a cualquier div con el nombre de clase "colores". Cuando se hace clic en el botón, el color del texto principal (del botón en el que se hizo clic) cambiará al color deseado. Solo cambia el último elemento.
Esto es lo que tengo hasta ahora. 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>Hice algunos cambios menores que no eran realmente necesarios, pero el más importante fue agregar el controlador de eventos, al elemento de botón recién creado, dentro del ciclo y no solo una vez al final. Es por eso que solo su último botón activaba el evento cambiando los colores.
Aquí está mi solución:
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>Recoge tus botones. Agregue detectores de eventos a todos ellos, y luego, cuando se llame a la función, busque el nodo principal del elemento y agregue una nueva clase.
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>