Estoy tratando de cambiar la propiedad css de la clase "nodo" haciendo clic en el div dentro de ella que obtuvo la clase "expandida".
Cuando hago clic en el div "expandir" dentro de la "nota", quiero ir a la "nota" principal para cambiar su tamaño:
var text = document.getElementById("text"); var add = document.getElementById("add"); var notespace = document.getElementById("notespace"); var expand = document.getElementsByClassName("expand"); var notes = document.getElementsByClassName("note"); add.addEventListener("click", function () { var textValue = text.value; var p = document.createElement("p"); p.innerHTML = "<div class='note'>" + textValue + "<br/><br/><div class='expand'> Expand </div></div>"; notespace.appendChild(p); text.value = ""; for (var i = 0; i < expand.length; i++) { expand[i].addEventListener("click", function () { notes[i].style.size = "3000px"; }) } })Puede usar el atributo parentNode :
for( var i = 0; i < expand.length; i++){ expand[i].addEventListener("click", function(){ this.parentNode.style.size = "3000px"; }) } O el método closest() :
for( var i = 0; i < expand.length; i++){ expand[i].addEventListener("click", function(){ this.closest(".note").style.size = "3000px"; }) } Tenga en cuenta que closest() no es compatible con IE .
Debe volver a obtener los valores de expandir y notas, porque después de agregarlos a su html, las dos variables expandir y notas, aún no sabe que las agregó y no las contienen. (también debe eliminar el eventlistner; de lo contrario, obtendrá un error en aproximadamente doce notas agregadas: D porque tendrá demasiados eventListners en cada elemento
var text = document.getElementById("text"); var add = document.getElementById("add"); var notespace = document.getElementById("notespace"); var expand = document.getElementsByClassName("expand"); var notes = document.getElementsByClassName("note"); add.addEventListener("click", function(){ var textValue = text.value; var p = document.createElement("p"); p.innerHTML = "<div class='note'>" + textValue + "<br/><br/><div class='expand'> Expand </div></div>"; notespace.appendChild(p); text.value = ""; for( var i = 0; i < expand.length; i++){ const note = notes[i]; expand[i].addEventListener("click", function() { note.style.size = "3000px"; note.style.backgroundColor = "red"; }); } }) #notespace { width: 100%, height: 100%, background: grey, } <button type="button" id="add">add</button> <input id="text"/> <div id="notespace"> </div>