1

Tengo una pagina web en la cual quiero mostrar un numero obtenido de un .php y dependiendo del numero, una imagen, usando javascript.

El html:

<h1 id="speed"></h1> //mostrar el valor numérico obtenido
<img style="width: 50%;" id="vst" src=""><br> //mostrar imagen según el valor

Con la siguiente función en js, he conseguido leer cada 100 ms el valor que el php me envia:

function refresh() {
   $('#speed').load('php_file.php', function() {
   setTimeout(refresh, 100);
   })
}

Tengo otra función, que me sirve para mostrar la imagen dependiendo del valor obtenido:

function getInputValue(){  
    var img = <?php require ('php_file.php'); ?>; //lectura del archivo para obtener el valor
    if (img == 0) {
        document.getElementById('vst').src="img/test.png" //mosrtar una imagen dependiendo del valor
    }

El problema es que con la segunda función, el valor mostrado en la web, no se actualiza y me gustaria saber si se le puede asignar un id como con el speed.

Si es necesaria alguna aclaración preguntad y gracias por la ayuda.

6
  • 1
    Ya has realizado otras preguntas donde te han comentado oportunamente que no puedes mezclar código de Javascript con PHP. Lo que intentas hacer no tiene un sentido práctico. Por otro lado, la llamada recursiva de tu función llamada refresh tendrá como consecuencia un stackoverflow tarde o temprano. Podrías usar setInterval en su lugar. Mi recomendación es que uses algún sistema bidireccional y programación reactiva. Saludos Commented el 4 ago. 2021 a las 7:50
  • Entonces si no tiene sentido, cual es la forma correcta para obtener el valor del archivo php? El hecho de no poder mezclar código, no lo veo tan claro como dices, ya que en la función que me extrae el id speed, no me da ningún problema y está leyendo un archivo en php.
    – andyio
    Commented el 4 ago. 2021 a las 7:56
  • Una cosa es html donde puedes incrustar código PHP porque el servidor lo procesa y luego hace el render que envía al cliente (una página compilada) y otra cosa muy distinta es intentar que una función JavaScript (que se ejecuta desde el lado cliente exclusivamente) intente ejecutar o cargar un dato de una función o página PHP (el código de PHP sólo puede ejecutarse en el servidor). Una forma de obtener resultados es mediante peticiones Ajax. Commented el 4 ago. 2021 a las 8:01
  • 1
    @MauricioContreras No hay llamada recursiva, está añadiendo a la cola de tareas una nueva llamada. Además, una vez que la cola sea ejecutada, se crea una nueva llamada, así que nunca hay más de una tarea en la cola. Commented el 4 ago. 2021 a las 8:05
  • No entiendo la segunda función, ¿porqué el require?. El load te devuelve un número ¿por qué no usas ese número para poner la imagen? Podría hacerse en la función callback
    – Juan
    Commented el 4 ago. 2021 a las 8:15

1 respuesta 1

2

Podrías hacerlo así, sin necesidad de jQuery y con una única llamada:

function refresh() {
  fetch('php_file.php')
    .then(response => response.text()) //nos quedamos con el texto de la respuesta
    .then(data => {
      document.getElementById('speed').innerText = data;
      const img = document.getElementById('vst')
      if (+data == 0) { //con el + delante lo transformamos a número
        img.src = 'img/test.png';
      } else {
        img.src = '';
      }
    });
}
//a diferencia de setTimeout, setInterval repite la llamada indefinidamente
let createdInterval = setInterval(refresh(), 1000);

Si quieres parar las actualizaciones, sólo tienes que usar

clearInterval(createdInterval);
5
  • En la linea document.getElementById('id').innerText = data;, a que hace referencia el id? El código html no cambia?
    – andyio
    Commented el 4 ago. 2021 a las 8:30
  • 1
    Debía ser 'speed' , lo he corregido Commented el 4 ago. 2021 a las 9:03
  • Es normal que hasta que no recargue la web no se actualice la imagen? He probado con el let dentro y fuera de la función pero no se auto-recarga.
    – andyio
    Commented el 4 ago. 2021 a las 9:14
  • La imagen se actualiza una vez el navegador se ha descargado la nueva... no es instantáneo Commented el 4 ago. 2021 a las 10:10
  • Cual es la manera correcta para hacer que sea lo mas en tiempo real posible? Sin saturar la web con un refresh?
    – andyio
    Commented el 19 ago. 2021 a las 11:52

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.