4

soy algo nuevo en JavaScript y quiero simplificar este código para mi página HTML, todo me apunta a que hay algún modo más eficiente para hacer esto, pero no se me ocurre cómo.

var loginButton = document.getElementById("show-login-button");
var loginPanel = document.getElementById("login");
var regButton = document.getElementById("show-register-button");
var register = document.getElementById("register");
var editter1 = document.getElementById("edit-1");
var editter2 = document.getElementById("edit-2");
var editter3 = document.getElementById("edit-3");
var editter4 = document.getElementById("edit-4");
var editter5 = document.getElementById("edit-5");
var editter6 = document.getElementById("edit-6");
var editter7 = document.getElementById("edit-7");
var editter8 = document.getElementById("edit-8");   
var editter9 = document.getElementById("edit-9");
var editter10 = document.getElementById("edit-10");
var editter11 = document.getElementById("edit-11");
var editter12 = document.getElementById("edit-12");
var editter13 = document.getElementById("edit-13");
var editter14 = document.getElementById("edit-14");
var editter15 = document.getElementById("edit-15");
var editter16 = document.getElementById("edit-16");
var editter17 = document.getElementById("edit-17");
var editter18 = document.getElementById("edit-18");
var editter19 = document.getElementById("edit-19");
var editter20 = document.getElementById("edit-20");
var editter21 = document.getElementById("edit-21");
var editter22 = document.getElementById("edit-22");
var editter23 = document.getElementById("edit-23");
var editter24 = document.getElementById("edit-24");
var editter25 = document.getElementById("edit-25");
var editter26 = document.getElementById("edit-26");
var editter27 = document.getElementById("edit-27");
var editter28 = document.getElementById("edit-28");
var editter29 = document.getElementById("edit-29");
var editter30 = document.getElementById("edit-30");
var editter31 = document.getElementById("edit-31");
var editter32 = document.getElementById("edit-32");
var editter33 = document.getElementById("edit-33");
var editter34 = document.getElementById("edit-34");
var editter35 = document.getElementById("edit-35");

function editElement(MyElement){
    var ownElement = document.getElementById(MyElement);
    ownElement.setAttribute("contenteditable", "");
    ownElement.style.borderStyle = "dotted";
};

function showElement(){
    if (register.style.display == "block" && loginPanel.style.display == "none") {
        loginPanel.style.display = "block";
        register.style.display = "none";
    } else if (loginPanel.style.display == "block"){
        loginPanel.style.display = "none";
    } else {
        loginPanel.style.display = "block";
    }
}

function showRegister(){
    if (loginPanel.style.display == "block" && register.style.display == "none"){
        loginPanel.style.display = "none";
        register.style.display = "block";
    } else if (register.style.display == "block") {
        register.style.display = "none";
    } else {
        register.style.display = "block";
    }
};

loginButton.addEventListener("click", showElement);
regButton.addEventListener("click", showRegister);

editter1?.addEventListener("click", function(){editElement("editable-1")});
editter2?.addEventListener("click", function(){editElement("editable-2")});
editter3?.addEventListener("click", function(){editElement("editable-3")});
editter4?.addEventListener("click", function(){editElement("editable-4")});
editter5?.addEventListener("click", function(){editElement("editable-5")});
editter6?.addEventListener("click", function(){editElement("editable-6")});
editter7?.addEventListener("click", function(){editElement("editable-7")});
editter8?.addEventListener("click", function(){editElement("editable-8")});
editter9?.addEventListener("click", function(){editElement("editable-9")});
editter10?.addEventListener("click", function(){editElement("editable-10")});
editter11?.addEventListener("click", function(){editElement("editable-11")});
editter12?.addEventListener("click", function(){editElement("editable-12")});
editter13?.addEventListener("click", function(){editElement("editable-13")});
editter14?.addEventListener("click", function(){editElement("editable-14")});
editter15?.addEventListener("click", function(){editElement("editable-15")});
editter16?.addEventListener("click", function(){editElement("editable-16")});
editter17?.addEventListener("click", function(){editElement("editable-17")});
editter18?.addEventListener("click", function(){editElement("editable-18")});
editter19?.addEventListener("click", function(){editElement("editable-19")});
editter20?.addEventListener("click", function(){editElement("editable-20")});
editter21?.addEventListener("click", function(){editElement("editable-21")});
editter22?.addEventListener("click", function(){editElement("editable-22")});
editter23?.addEventListener("click", function(){editElement("editable-23")});
editter24?.addEventListener("click", function(){editElement("editable-24")});
editter25?.addEventListener("click", function(){editElement("editable-25")});
editter26?.addEventListener("click", function(){editElement("editable-26")});
editter27?.addEventListener("click", function(){editElement("editable-27")});
editter28?.addEventListener("click", function(){editElement("editable-28")});
editter29?.addEventListener("click", function(){editElement("editable-29")});
editter30?.addEventListener("click", function(){editElement("editable-30")});
editter31?.addEventListener("click", function(){editElement("editable-31")});
editter32?.addEventListener("click", function(){editElement("editable-32")});
editter33?.addEventListener("click", function(){editElement("editable-33")});
editter34?.addEventListener("click", function(){editElement("editable-34")});
editter35?.addEventListener("click", function(){editElement("editable-35")});

Intenté usar un for pero no se me ocurre cómo ponerle el nombre a la variable. ¿Es posible hacerlo?

2 respuestas 2

4

Podrías usar una clase para agrupar a todos los elmentos del mismo tipo, no es necesario ponerle un identificador a cada uno, a menos que requieras realmente un elemento diferenciado de los demás.

Por ejemplo:

const editableElements = document.getElementsByClassName('editable');

function onClickHandler(event) {
  event.currentTarget.setAttribute("contenteditable", "");
  event.currentTarget.style.borderStyle = "dotted";
  event.currentTarget.style.borderColor = "red";
};

for(let i = 0; i < editableElements.length; ++i) {
  editableElements.item(i).addEventListener("click", onClickHandler);
}
.editable {
  padding: .3rem;
  margin: 0.5rem;
  border: solid black 2px;
}
<div class="editable">Uno</div>
<div class="editable">Dos</div>
<div class="editable">Tres</div>
<div class="editable">Cuatro</div>
<div class="editable">Cinco</div>
<div class="editable">Seis</div>
<div class="editable">Siete</div>
<div class="editable">Ocho</div>
<div class="editable">Nueve</div>
<div class="editable">Diez</div>

Con esto, recorres la colección de elementos que quieres hacer editables, y en una sola linea le asignas a todos el manejador para el evento click, que aplicará los estilos y atributos escogidos.

Si deseas volver al estado inicial todos los elementos excepto aquel en el que has hecho click, podrías hacer algo parecido a lo siguiente:

const editableElements = document.getElementsByClassName('editable');

function toggleEditable(element, editable) {
  if(editable) {
    element.setAttribute("contenteditable", "");
    element.style.borderStyle = "dotted";
    element.style.borderColor = "red";
    return;
  }
  element.removeAttribute("contenteditable");
  element.style.borderStyle = "solid";
  element.style.borderColor = "black";
}

function onClickHandler(event) {
  for(let i = 0; i < editableElements.length; ++i) {
    toggleEditable(editableElements.item(i), i === event.currentTarget.indexClicked);
  }
};

for(let i = 0; i < editableElements.length; ++i) {
  editableElements.item(i).indexClicked = i;
  editableElements.item(i).addEventListener("click", onClickHandler);
}
.editable {
  padding: .3rem;
  margin: 0.5rem;
  border: solid black 2px;
}
<div class="editable">Uno</div>
<div class="editable">Dos</div>
<div class="editable">Tres</div>
<div class="editable">Cuatro</div>
<div class="editable">Cinco</div>
<div class="editable">Seis</div>
<div class="editable">Siete</div>
<div class="editable">Ocho</div>
<div class="editable">Nueve</div>
<div class="editable">Diez</div>

En este código uso una función llamada toggleEditable que recibe un elemento y un valor booleano, que indica si el elemento debe hacerse editable o no.

De esta forma, cada vez que se hace clic en un elemento, el mismo se hará editable y los demás se harán no editables.

Espero que esto te ayude a resolver problema.

1

Una mejor manera de Manejar eventos cuando los elementos tienen sintaxis en comun es apañarce/aplicar ciclos que adiciones los eventos y manejen los trigger.

Te dejo este ejemplo:

var loginButton = document.getElementById("show-login-button");
var loginPanel = document.getElementById("login");
var regButton = document.getElementById("show-register-button");
var register = document.getElementById("register");

function showElement() {
    if (register.style.display === "block") {
        register.style.display = "none";
        loginPanel.style.display = "block";
    } else {
        loginPanel.style.display = (loginPanel.style.display === "block") ? "none" : "block";
    }
}

function editElement(id) {
    var ownElement = document.getElementById(id);
    ownElement.setAttribute("contenteditable", "");
    ownElement.style.borderStyle = "dotted";
}

loginButton.addEventListener("click", showElement);
regButton.addEventListener("click", showElement);

for (let i = 1; i <= 35; i++) {
    var editter = document.getElementById(`edit-${i}`);
    if (editter) {
        editter.addEventListener("click", function () {
            editElement(`editable-${i}`);
        });
    }
}

no he probado el codigo posiblemente tenga errores pero no tengo un html a mano como para poder agregar y ver la funcionalidad. adapta la solucion a tu necesidad. como veras depende del ciclo for que va de 1 a 35, apegandome a tu ejemplo.

pro otro lado si no sabes la cantidad de ejementos editables, por lo tanto es desconocidos entonces nos aremos del uso de querySelectorAll para acceder a todos los elementos mediante un query al dom... quedando de la siguiente forma:

var loginButton = document.getElementById("show-login-button");
var loginPanel = document.getElementById("login");
var regButton = document.getElementById("show-register-button");
var register = document.getElementById("register");

function showElement() {
    if (register.style.display === "block") {
        register.style.display = "none";
        loginPanel.style.display = "block";
    } else {
        loginPanel.style.display = (loginPanel.style.display === "block") ? "none" : "block";
    }
}

function editElement(el) {
    el.setAttribute("contenteditable", "");
    el.style.borderStyle = "dotted";
}

loginButton.addEventListener("click", showElement);
regButton.addEventListener("click", showElement);

var editableElements = document.querySelectorAll(".editable");
editableElements.forEach(function(el) {
    el.addEventListener("click", function () {
        editElement(el);
    });
});
2
  • 2
    Muchas gracias por la respuesta!
    – Diufuu
    Commented el 13 ene. 2023 a las 19:02
  • 2
    para eso estamos. Commented el 13 ene. 2023 a las 19:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.