No logro que se mantenga el texto en el cuadro, se terminal eliminando y tampoco deja de altualizar la página cada ves que se da en agregar.
const btn= document.querySelector("[data-form-btn]");
console.log(btn);
btn.addEventListener("click", function (evento) {
evento.preventDefault();
const input= document.querySelector("[data-form-input]");
console.log(input.value);
});
¡Hola Oscar!
Por lo que puedo entender de tu código, estás tratando de evitar que la página se actualice cada vez que se hace clic en el botón "Agregar" y que el texto que se ingresa en el cuadro de entrada permanezca allí.
Para evitar que la página se actualice, estás usando el método preventDefault() en el objeto evento. Esto es correcto.
Para mantener el texto en el cuadro de entrada, debes asignar el valor del cuadro de entrada a una variable y luego usar esa variable para mostrar el valor en la página. Aquí te muestro cómo hacerlo:
const btn = document.querySelector("[data-form-btn]");
const input = document.querySelector("[data-form-input]");
const output = document.querySelector("[data-form-output]");
btn.addEventListener("click", function (evento) {
evento.preventDefault();
const texto = input.value;
output.textContent = texto;
});En este ejemplo, he creado una variable llamada output que representa el elemento en el que deseas mostrar el texto ingresado. Luego, en el controlador de eventos del botón "Agregar", he asignado el valor del cuadro de entrada a la variable texto y he establecido el contenido de output en el valor de texto.
Espero que esto te ayude a resolver tu problema. ¡Buena suerte y feliz aprendizaje!