estoy intentando crear un botón que, al presionarse, cambie la propiedad "contenteditable" de una etiqueta HTML. El tema es que al crear el AddEventListener, no soy capaz de poner una función que creé para cambiar esa propiedad con solo el id de la etiqueta. Ya intenté utilizando "function(){mifuncion()}" seguido del "click". Intenté ejecutar la función entera directamente desde el AddEventListener, y nada. No funciona a menos que la deje tal y como está en el código debajo. Por supuesto, los con el id "pencil-icon" son íconos de lápiz para editar el texto.
var editter1 = document.getElementsByClassName("edit-1");
var editter2 = document.getElementsByClassName("edit-2");
var editter3 = document.getElementsByClassName("edit-3");
var editter4 = document.getElementsByClassName("edit-4");
function editElement(event, MyElement){
var ownElement = document.getElementById(MyElement);
ownElement.setAttribute("contenteditable", "")
};
editter1.addEventListener("click", editElement("own-title"));
<div id="prof-title">
<h1 id="own-title">
Lorem ipsum
<small class="text-muted">Lorem ipsum.</small>
<i class="fa-sharp fa-solid fa-pencil edit-1" id="pencil-icon"></i>
<br>
</h1>
<h2 class="text-muted">Lorem ipsum <i class="fa-sharp fa-solid fa-pencil edit-2" id="pencil-icon"></i> </h2>
<br>
<div class="line-1">
<hr>
</div>
<div id="prof-sub">
<h2><b>¡Hola!</b>
<br>
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
<br>
Lorem ipsum
<i class="fa-sharp fa-solid fa-pencil edit-3" id="pencil-icon"></i>
</h2>
</div>
<div class="line-1">
<hr>
</div>
</div>