0

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>

1 respuesta 1

0

Tienes un error en editter1.addEventListener("click", editElement("own-title")); le envías 1 solo parámetro a la funcion mientras que arriba tienes declarados que estas recibiendo dos editElement(event, MyElement).

En la función como event está de primero editElement(event, MyElement), event está recibiendo el parámetro que enviaste que en este caso es own-title mientras que MyElement no está recibiendo nada y con ese es con el que estás trabajando, puedes hacer 2 cosas:

function editElement(MyElement) //Borrarlo 

function editElement(MyElement, event) //Cambiar el orden

CODIGO COMPLETO

let editter1 = document.getElementById("edit-1");
let editter2 = document.getElementsByClassName("edit-2");
let editter3 = document.getElementsByClassName("edit-3");
let editter4 = document.getElementsByClassName("edit-4");

    function editElement(MyElement){
        console.log(event)
        var ownElement = document.getElementById(MyElement);
        
        ownElement.setAttribute("contentEditable", '')

        //ownElement.setAttribute("contentEditable", 'true') //Otra opción pero es lo mismo, agregando el true

        //otra opción apuntando a la propiedad y cambiando el estado
        //ownElement.contentEditable = 'true'
    };
 
    editter1.addEventListener('click', () => {  
        editElement("prof-sub")
    });

El editter1 lo cambie a getElementById ya que me daba un error al utilizar getElementsByClassName y eso tiene que ver con que getElementById apunta a un elemento definido en el DOM con ese id mientras que con getElementsByClassName devuelves una matriz con los elemento que coinciden con esa clase, tendrías que iterarlos ya que es una matriz pues.

NOTA:

Al utilizar editter1 con getElementById el elemento si contiene la propiedad addEventListener y si utilizas getElementsByClassName no la tiene, por lo tanto como lo tenías no iba a capturar el evento click

HTML

<div id="prof-title">
        <h1 id="own-title">
            Lorem ipsum
            <small class="text-muted">Lorem ipsum.</small>
            <button type="button" class="fa-sharp fa-solid fa-pencil edit-1" id="edit-1">BOTON</button>
            <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>
1
  • 1
    GRACIAS AMIGO, me salvaste. No conocía eso del GetElementsByClassName.
    – Diufuu
    el 11 ene. a las 20:48

Tu Respuesta

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

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