59 - Desafío 6: Modificar la imagen que muestra la etiqueta HTML 'img' en forma dinámica
Problema:
pagina.html
estilos.css
funciones.js
Ejecución de la página
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prueba</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <div id="contenedor"> <div> <div id="persona"> </div> <div> <input type="range" min="1" max="8" id="rango" value="1" list="valores"> <datalist id="valores"> <option value="1"> <option value="2"> <option value="3"> <option value="4"> <option value="5"> <option value="6"> <option value="7"> <option value="8"> </datalist> </div> <div> <p id="grasa">5-9% grasa corporal</p> </div> </div> </div> <script src="funciones.js"></script> </body> </html>
#rango { width: 250px; } #contenedor { display: flex; justify-content: center; width: 100%; }
const leyendas = ["5-9% grasa corporal", "10-14% grasa corporal", "15-19% grasa corporal", "20-24% grasa corporal", "25-29% grasa corporal", "30-34% grasa corporal", "35-39% grasa corporal", ">40% grasa corporal" ] let nro = 1 document.querySelector("#persona").innerHTML = `<img src="../imagenes/persona${nro}.png" id="imagen">` document.querySelector("#rango").addEventListener("input", () => { nro = parseInt(document.querySelector("#rango").value) document.querySelector("#imagen").setAttribute("src", `../imagenes/persona${nro}.png`) document.querySelector("#grasa").innerText = leyendas[nro - 1] })
No tiene disponible el navegador la capacidad de iframe
Retornar