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?