2

Hice un Formulario con un Input y un Botón y aparte un Div vacío. Intenté que el valor del Input se escribiera dentro del div al presionar el botón, pero no sé por que no se muestra (hice 2 funciones, una para que funcione en el div y la otra para verificar y que se muestre en consola, la de la consola funciona perfecto) . Este es el código html:

    <div>
        <section>
            <h1>Enviar Texto</h1>
            <form method="post">
                <input type="text" id="Comentario">
                <input id="btn" class="btn" type="button" value="Enviar">
            </form>
        </section>
        <div class="notificaciones" id="text">
        </div>
    </div> 

Este es el código Javascript:


const btn = document.querySelector('#btn');

const cuadroTexto = document.querySelector('#text')

const escrito = document.createElement('h2')
escrito.textContent = coment.value;

btn.addEventListener('click', ()=>{
    cuadroTexto.appendChild(escrito);
});

btn.addEventListener('click', ()=>{
    console.log(coment.value);
});

Acá se puede ver todo

Soy bastante nuevo programando. Muchas gracias por la ayuda

1 respuesta 1

3

Así como lo hiciste está todo bien, solo hice unas pequeñas correcciones.

En este caso cada vez que le des clic al botón de enviar se agregará un nuevo H2 de bajo, eliminé el form, porque para este caso no hace falta .

//Obtenemos los valores a ocupar
const btn = document.querySelector('#btn');
let cuadroTexto = document.querySelector('#text')
let inputText = document.getElementById('comentario');

btn.addEventListener('click', ()=>{
  
  //creamos elemento H2 y le asignamos el valor del input
  let escrito = document.createElement('h2')
  escrito.textContent = inputText.value;  
  
  //insertamos  dentro del div
    cuadroTexto.appendChild(escrito);
});
<div>
  <section>
    <h1>Enviar Texto</h1>
    <input type="text" id="comentario">
    <input id="btn" class="btn" type="button" value="Enviar">
  </section>
  <div class="notificaciones" id="text">
  </div>
</div>

Si lo que quieres es que no se agregue un H2 cada vez que le das en enviar sino se reemplace el texto es de esta forma.

espero a ver ayudado :)

//Obtenemos los valores a ocupar
const btn = document.querySelector('#btn');
let h2 = document.getElementById('textoNotificacion')
let inputText = document.getElementById('comentario');


btn.addEventListener('click', ()=> { 
 //asignamos el valor del input al h2
  h2.textContent = inputText.value;  
});
<div>
  <section>
    <h1>Enviar Texto</h1>
    <input type="text" id="comentario">
    <input id="btn" class="btn" type="button" value="Enviar">
  </section>
  <div class="notificaciones" id="text">
    <h2 id="textoNotificacion"></h2>
  </div>
</div>

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.