Estoy creando una web en la cual realizo una conexión a la base de datos, extraigo el valor de un campo y lo guardo en la variable velocidad_db
usando php
, para luego mostrar una imagen en pantalla:
<?php
//Conectar a la base de datos
$conexion_mysql = mysqli_connect("x", "x", "x", "x");
$sql = "SELECT SPEED FROM ORDERS WHERE ID=1";
$res= mysqli_query($conexion_mysql, $sql);
$datos = mysqli_fetch_array($res);
//Obtener el valor del campo como un int
$var = intval($datos['SPEED']);
//Guardar la variable de php en js para luego poder usarla
print '
<script type="text/javascript">
var velocidad_db;
velocidad_db = "' . $var . '"
</script>';
?>
Luego, usando el valor de esta variable, intento mostrar una imagen acorde al valor de la variable usando el id
spd
:
//Codigo html que muestra la imagen
<img id="spd" src="" alt="">
<script type="text/javascript">
//Muestro la imagen inicial al acceder a la web
document.getElementById('vel').src = "../img/ve0.png"
function speedm() {
//Usar el valor de la base de datos extraido antes con la consulta php
var final_spd = velocidad_db;
document.getElementById("show_speed").innerHTML = final_spd;
//Si el valor de la variable de la base de datos es 100, asignar la ruta al src de la imagen que tiene el id spd
if (final_spd == 100) {
document.getElementById("spd").src = "../img/ve1.png"
} else if (final_spd == 200) {
document.getElementById("spd").src = "../img/ve2.png"
}
}
</script>
Para mostrar este valor, uso el siguiente botón que llama a la función speedm
. Al clicar el botón, la imagen se actualiza al valor sacado de la base de datos.
<button onclick="speedm()">ENVIAR</button>
<h2 id="show_speed"></h2>
Me gustaría realizar esto de forma automática, es decir, al cambiar el valor en la base de datos, que automáticamente se cambie la imagen que se muestra en mi web.
En la pregunta he añadido comentarios por si algo no se entiende ya que no se si es la forma correcta de hacer lo que quiero.