1

estoy intentando capturar datos (procedentes desde PHP en realidad) en el value de un input oculto.

Tanto con javascript puro como con Jquery he intentado capturar esos datos para procesarlos después (en el ejemplo sólo los muestro por pantalla) y no hay manera.

Código HTML (pruebaValor.html):

<html>
<head>
    <script src="jquery-3.4.1.js"></script>
    <script src="pruebaValor.js"></script>
</head>
<body>
<input id='prueba1' type="hidden" value="hola" /> <!--El value en realidad obtiene sus datos mediante un echo de PHP-->
</body>
</html>

Código Javascript (pruebaValor.js)

var x = document.getElementById('prueba1');
var y = $('#prueba1');;
console.log(x); //¿Por qué dice que es null?
console.log(x.value); //Al ser un null se obtiene un error cuando se accede a su valor.
console.log(y); //Me devuelve un objeto
console.log(y.val()); //Me devuelve indefinido.
console.log(y.attr('value')); //Y aquí también

Aunque en el ejemplo sólo los muestro por consola, en lo que estoy haciendo el objetivo es procesar esos datos.

Gracias de antemano.

3
  • ¿Qué quieres decir con procesar esos datos? ¿Qué haces para procesarlos, dónde los procesas y qué error tienes cuando los procesas?
    – A. Cedano
    Commented el 23 may. 2020 a las 11:10
  • Es que simplemente he puesto un código simplificado. El valor del imput se va a usar en realidad para una consulta AJAX. Commented el 23 may. 2020 a las 12:27
  • En js puro si funciona, prueba a eliminar las lineas de jquery y te funciona. No te los devuelve porque te está dando un error, al eliminar esas lineas si que te lo devuelve
    – Suso
    Commented el 8 jun. 2022 a las 23:21

1 respuesta 1

1

El problema es que el script está ejecutándose antes de que la vista haya sido renderizada.

var x = document.getElementById('prueba1');

En esta línea, x es undefined porque efectivamente aún no hay ningún elemento en el DOM que tenga por id prueba1. De hecho, no hay ninguno.

Hay dos formas de hacer esto.

  1. Suscribirse al evento load
    window va a emitir un evento llamado load una vez se haya renderizado toda la vista. Por tanto, podemos suscribirnos a ese evento para entonces correr nuestro script
window.addEventListener('load', () => {
    const x = document.getElementById('prueba1');
    console.log(x); // HTMLElement
});
  1. Diferir la ejecución del script
    La cual es la forma de hacer esto, realmente. Podemos incluir el tag script en el HTML del mismo modo pero con el atributo defer. Este atributo hace precisamente lo que buscamos: va a diferir la ejecución del script hasta que la vista esté renderizada.

index.html

<script type="text/javascript" src="pruebaValor.js" defer></script>

pruebaValor.js

const x = document.getElementById('prueba1');
console.log(x); // HTMLElement

Espero que sirva.

1
  • Gracias, ha funcionado. No me había dado cuenta de que el problema estaba al indicar que había un script antes de todo. Commented el 23 may. 2020 a las 12:29

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.