0

Referente al tema de eventos en JS, yo creo una pagina con un input de texto y dos párrafos. ¿Cómo podría añadir información a esos dos párrafos a medida que voy escribiendo en el input? Es decir, que me lo vaya actualizando. Además, en un párrafo debe aparecer el mismo texto que en el input, pero en mayúsculas, y en el otro párrafo igual pero en minúsculas.

    function escribirTexto(){
    	var añadeTexto=document.getElementById("añade").value;
    }
    
    Formulario&nbsp;<input type="text" id="añade" onekeypress="escribirTexto()">
    
    <p id="añade" onekeypress="escribirTexto()"> Este es el nuevo párrafo 1</p>
    <p id="añade" onekeypress="escribirTexto()"> Este es el nuevo párrafo 2</p>
    

2

2 respuestas 2

3

correcciones:
1. los scripts siempre deben ir al final de documento antes del cierre del body </body> esto es para que cargen de ultimo, si los colocas al principio cargaran antes que los elementos y no podra leer los mismos porque aun no existen.
2. no se usan id con palabras con acentos!
3. en los tags <p> no es necesario llamar a tu funcion!
4. No es recomendable utilizar innerHTML es mejor textContent o innerText

puedes hacerlo asi:

// creamos la funcion y le pasamos el input
function escribirTexto(e){

  // "e" es el input envido asi mismo como this;
  // el innerText nos escribe en el parrafo y el value nos optiene el valor
  // la funcion toUpperCase() convierte a mayuscula
// la funcion toLowerCase() convierte a minuscula
  document.getElementById("text_mayuscula").innerText = e.value.toUpperCase();
  document.getElementById("text_minuscula").innerText = e.value.toLowerCase();

}
Formulario&nbsp;<input type="text" onkeyup="escribirTexto(this)">

<h4>Parrafo en mayúscula:</h4>
<p id="text_mayuscula" > Este es el nuevo párrafo 1</p>
<h4>Párrafo en minúscula:</h4>
<p id="text_minuscula" > Este es el nuevo párrafo 2</p>

2

Puedes escuchar el evento onkeyup para llamar a una función y realizar tu lógica. revisa los eventos de input

Nota: debes evitar usar caracteres especiales como la ñ o tildes para tus variables revisa este post

var text_mayuscula = document.getElementById("text_mayuscula");
var text_minuscula = document.getElementById("text_minuscula");

function escribirTexto(){
    var textOriginal=document.getElementById("input_text").value;
    text_mayuscula.innerHTML = textOriginal.toUpperCase();
    text_minuscula.innerHTML = textOriginal.toLowerCase();
}
Formulario: <input type="text" id="input_text" onkeyup="escribirTexto()">

<h4>Parrafo en mayúscula:</h4>
<p id="text_mayuscula" > Este es el nuevo párrafo 1</p>
<h4>Párrafo en minúscula:</h4>
<p id="text_minuscula" > Este es el nuevo párrafo 2</p>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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