0

No sé donde está el error...

Me pasa q al clickear en "CLICK PARA CAMBIAR" me ejecuta la función solo una vez😦. Si quiero volver a cambiar el texto no me deja, simplemente no pasa nada al clickear en "CLICK PARA CAMBIAR". Es decir, me permite hacer el cambio de texto solo una vez.

Dejo código:

function barraEditAcerdeMi() {
 // Cada vez q aprieto este botón (el cual tiene su función en "onclick" q es la q estoy definiendo acá) aparecen estos dos elementos, el 1ro es el input donde escribiré el nuevo texto, y el otro elemento es el botón q al presionar hará los cambios. Acá simplemente los hago visibles. 
  document.getElementById("tituloNuevo").style.display = "block";
  document.getElementById("botonCambiarTexto").style.display = "block";
}
    
function editarAcercaDeMi() {
  // Esta funcion es la q se ejecutará al apretar el botón mencionado, es decir, se reemplazará el texto existente por el texto nuevo (el q escriba en el input)
  document.getElementById("pAcercaDeMi").innerHTML = document.getElementById("tituloNuevo").value;
}
<body>
     <div class="parrafo">
        <p id="pAcercaDeMi"><button type="button" id="botonCambiarTexto" onclick="editarAcercaDeMi()"; display:none">CAMBIAR TEXTO</button><input style="display: none;" type="text" id="tituloNuevo"> Este texto se reemplazará por otro al clickear el botón</p>
     </div>
     <div type="button" onclick="barraEditAcerdeMi()">CLICK PARA CAMBIAR<i class="fas fa-pen-square" id="editAdeMi" style="color: rgb(0, 0, 0); margin: 5px;"></i>
     </div>
         
    </body>

El error q me aparece en consola al querer ejecutar la función por 2da vez es: "Uncaught TypeError: Cannot read properties of null (reading 'style')"

0

1 respuesta 1

2

Debes realizar las siguiente correcciones:

  1. Error tipográfico aqui:
onclick="editarAcercaDeMi()"; display:none"

debes dejarlo así:

onclick="editarAcercaDeMi()" style="display:none"
  1. Error de posición y concepto aquí:
Este texto se reemplazará por otro al clickear el botón</p>

que debes cambiarlo, por ejemplo, por esto:

</p>
<div id="textoACambiar">
    Este texto se reemplazará por otro al clickear el botón
</div>

porque así lo quitas del elemento <p id="pAcercaDeMi">, que luego equivocadamente sobreescribes completamente en tu función editarAcercaDeMi(), y por eso luego no te permite volver a cambiarlo, porque ya no existe.

Al ponerlo en un elemento distinto, en este caso un <div> con un id distinto (textoACambiar), podrás sobreescribirlo de forma individual, y no todo el párrafo como hasta ahora.

  1. Modifica esto en la función editarAcercaDeMi():
document.getElementById("pAcercaDeMi").innerHTML = document.getElementById("tituloNuevo").value;

por esto otro:

document.getElementById("textoACambiar").innerHTML = document.getElementById("tituloNuevo").value;

para que, efectivamente, el cambio se realice en el nuevo <div> que contiene el texto a modificar.

Ya nos dirás si te así te funciona como pretendes.

2
  • Muchísimas gracias!!! ahí me funcionó! Estoy aprendiendo je, perdón por lo novata. Muy clara tu respuesta...También soy nueva en este sitio, así q estoy aprendiendo a utilizarlo, creo q no me deja darte puntos x ser nueva XD. Si hay otra forma de "valorar" tu respuesta, decime. Gracias!! Commented el 25 feb. 2022 a las 21:49
  • jeje, no pasa nada, ya has hecho lo correcto, que era aceptar la respuesta, asi la comunidad lo verá y tambien podran aprender de ella, y la pregunta no quedará pendiente de respuesta eternamente. Gracias por colaborar en el buen funcionamiento del sitio! Si te lees Cómo preguntar y realizas el recorrido de bienvenida aprenderás lo básico del sitio y además ganarás tu primera medalla! Saludos!
    – masterguru
    Commented el 25 feb. 2022 a las 22:03

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.