0

¡Hola comunidad! Estoy tratando de crear una variable que me tome valor de un cuadro de texto al presionar un botón e imprimir variable en pantalla, pero me da un error. Estoy comenzando a estudiar el javascript y estoy algo perdido.

Gracias.

**HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>Juego de Trivia</h1>
    <text>Ingresa tu nombre:</text>
    
        <form>
         <input type="text" id="texto" />
         <input type="submit" value=">>" onclick="guardado">
        </form>
         <script src="script.js"></script>
        
  </body>
</html>

JS:

var valor = document.getElementById("texto").value;
document.write(valor);**
4
  • 2
    ¿Y cuál es el error?
    – user128299
    Commented el 20 abr. 2021 a las 20:56
  • No te preocupes, yo estoy aprendiendo pero te voy a ayudar
    – AQMR
    Commented el 21 abr. 2021 a las 11:15
  • A toda persona que llegue aquí: TODOS son bienvenidos a hacer preguntas, ESPECIALMENTE para aprender. Sí existen manera eficientes de hacer las preguntas, sean de principiante o avanzado. Estas maneras tambien se aprenden. Aprendizaje siempre hay no importa el nivel.
    – keponk
    Commented el 21 abr. 2021 a las 11:43
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! Aqui tambien se viene a aprender.. todos aprendemos todo el tiempo...
    – gbianchi
    Commented el 21 abr. 2021 a las 14:50

1 respuesta 1

1

Aqui tenes lo que conseguí hacer, espero que te sirva el resultado.

document.body.innerHTML = `<h1>Juego de Trivia</h1>
    <text>Ingresa tu nombre:</text>
    
        <form>
         <input type="text" id="texto">
         <input type="button" value=">>" id="boton">
        </form>`;
//con las comillas `` puedes meter el contenido entero de un documento para imprimirlo en el propio dom
//como ves, lo primero que hago es un document.body.innerHTML = `contenido`
//esto es totalmente equivalente a si lo insertas dentro del html. Es literalmente lo mismo, solo que yo
//lo puse de forma dinamica. Esto te ayudara en el futuro, aśi que no lo pierdas, se les llama plantillas literales
//o template strings en js
//Te habras fijadoe n que cambie el tipo del input submit, ya que al estar detro del formulario, mandabas el formulario a traves de la web
//aunque hubieras tenido TODO bien, no hubieras visto nada por eso, asi que lo primero a cambiar es eso

        let btn = document.getElementById('boton');//le puse de id boton, y cree un addEventListener a los clicks
        btn.addEventListener('click',()=>{
            guardado();//donde te manda directamente a la funcion guardado, importante añadir los parentesis ()
            //esto funciona igual que el evento onclick del boton que tu creaste
        });

function guardado(){//establecemos la funcion guardado()
    let inp = document.getElementById('texto');//obtenemos SOLO el input
    console.log(inp.value);//e imprimimos en consola el VALOR del input

    //si quieres hacer un document.write(inp.value) tambien serviria
}

Pd: en StackOverflow también se viene a aprender, solo que hay que formular bien las preguntas. ;D

2
  • 1
    Buena respuesta. Puedes simplificar omitiendo la función anónima para dejar solo el nombre de la función a ejecutar cuando se reciba el clic: btn.addEventListener('click', guardado);
    – Triby
    Commented el 21 abr. 2021 a las 15:44
  • True, pura costumbre de hacerlo siempre así
    – AQMR
    Commented el 21 abr. 2021 a las 20:41

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.