0

mi duda es como asignarle a una variable un getElementById por fuera de una función. Porque solamente puedo si esa variable la creo dentro de una función, pero no para el afuera. Quiero poder hacerlo al principio sin tener una función asignada, gracias.

les dejo el código Html:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 2</title>
</head>
<body>
    <p>Número 1:</p><input id="num1" type="number"><br>
    <p>Número 2:</p><input id="num2" type="number"><br><br>
    <button onclick="totalNumeros()">Mostrar todos los números:</button><p id="numeros">prueba</p>
    <button>Mostrar totalidad de números:</button><p id="totalidad"></p>
    <button>Mostrar suma: </button><p id="suma"></p>

<script type="text/javascript" src="js2.js"></script>
</body>
</html>

y les dejo el código JS:

var num1 = document.getElementById('num1').value;
var num2 = document.getElementById("num2").value;


function totalNumeros(){
    document.getElementById("numeros").innerHTML = num1;
}
5
  • Bienvenido Juan, podrías actualizar la pregunta con el mínimo código necesario para entender lo que estás haciendo y hacer pruebas para ayudar lo más rápido posible? el 18 may. 2022 a las 1:19
  • Listo! Ya lo actualicé el 18 may. 2022 a las 1:54
  • No se entiende esta pregunta. En su código tiene 2 variables fuera de una función a las cuales le esta asignando un document.getElementById, entonces que es exactamente lo que quiere hacer? el 18 may. 2022 a las 2:01
  • sí, pero en el código no me funciona, cuando ejecuto la página, no le asigna el valor del imput a la variable. Lo intenté con queryselector y tampoco anda el 18 may. 2022 a las 2:08
  • para tomar el valor del input debes colocarle un addEventListener(change) al input asi dispara una funcion que haga lo que necesitas. Prueba a poner esta linea <input id="num1" type="number" value="123"> y veras como si toma el valor el 18 may. 2022 a las 2:23

1 respuesta 1

1

Tienes mal concebida la lógica de programación. Veo 2 problemas aquí

  1. num1 y num2 siempre serán undefined, dado que al iniciar el script y recuperar sus valores, eso es lo que trae por defecto. No es una comunicación de dos vías, es decir, si tu premisa es que el escribir un número se actualice la variable, es un error de conceptualización.
  2. Tu etiqueta <p> no tiene una propiedad de innerHTML, si no de textContent

Yo lo haría de la siguiente forma

function totalNumeros() {
 const num1 = document.getElementById('num1').value || 0;
 const num2 = document.getElementById('num2').value || 0;
 
 document.getElementById('numeros').textContent = num1;
 
}
<p>Número 1:</p><input id="num1" type="number"><br>
    <p>Número 2:</p><input id="num2" type="number"><br><br>
    <button onclick="totalNumeros()">Mostrar todos los números:</button><p id="numeros">prueba</p>
    <button>Mostrar totalidad de números:</button><p id="totalidad"></p>
    <button>Mostrar suma: </button><p id="suma"></p>

Intenta utilizar siempre const en lugar de var (Si la variable puede mutar en tipo de dato o ser reemplazada por otro valor más adelante, usa let)

Básicamente lo que hice es recoger el num1 cada vez que se da click al botón, no sólo al iniciar el script. Si necesitas forzosamente la variable fuera de la función, aunque para mi no tiene sentido, podrías hacer esto

let numExterior = 0;
function totalNumeros() {
 const num1 = document.getElementById('num1').value || 0;
 const num2 = document.getElementById('num2').value || 0;
 numExterior = num1;
 
 document.getElementById('numeros').textContent = numExterior;
 
}

De esta forma siempre tendrás una referencia de la variable, dentro y fuera de un scope

1
  • Gracias! Después de un mes leyendo teoría de JS entiendo muchísimo más estas cosas. Es incompatible con JS pretender que una variable se actualice sola. el 16 jun. 2022 a las 3:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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