Soy un estudiante que trabaja en un proyecto de arte en el que selecciono una de las 500 imágenes creadas para mostrarla en una página web. Soy muy nuevo en la codificación y solo entiendo realmente html y css, con muy poco conocimiento en JavaScript. Estoy atascado en hacer que aparezcan las imágenes, cuando inspecciono me da un error que dice: Failed to load resource: net::ERR_FILE_NOT_FOUND $selected_image}< No estoy muy seguro de qué hacer con esto, espero que alguien quisiera ayudarme con esto.
Gracias :)
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" media="screen" href="css/main.css"> <!-- <link rel="JavaScript" href="script.js"> --> <meta charset='utf-8'> <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'> <title>Mother</title> <body> <div id="container"> <div id="inner_container"> <img id="image_shower"/> </div> <div id="button_container"> <button onclick="get_random_image()"></button> </div> </div> <script> image_array = [ 'Lilith10.png', 'Lilith11.png', 'Lilith12.png', 'Lilith13.png', 'Lilith14.png'] function get_random_image(){ random_index = Math.floor(Math.random() * image_array.lenght); selected_image = image_array[random_index] document.getElementById('image_shower').src = './images/$selected_image}'} </script> </body> </html>Las cadenas de plantilla de Javascript se escriben con comillas oblicuas, y las variables dentro deben tener corchetes alrededor (solo tenía el cierre):
document.getElementById('image_shower').src = `./images/${selected_image}`;EDITAR
Incluso si en el presente caso esto no detiene el funcionamiento de su código (a menos que active el "modo estricto"), también le recomiendo que use las palabras clave apropiadas para declarar sus variables.
const image_array = [ 'Lilith10.png', 'Lilith11.png', 'Lilith12.png', 'Lilith13.png', 'Lilith14.png' ]; function get_random_image() { const random_index = Math.floor(Math.random() * image_array.length); const selected_image = image_array[random_index]; document.getElementById('image_shower').src = `./images/${selected_image}`; }