I'm a student working on an art project in which I select one of 500 created images to show up on a webpage. I'm very new to coding and only really understand html and css, with very small amount of knowledge in JavaScript. I'm stuck in getting the images to show up, when I inspect it gives me an error saying: Failed to load resource: net::ERR_FILE_NOT_FOUND $selected_image}< I'm not really sure what to do with this, I hope someone would like to help me with this.
Thankyou :)
<!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>
Javascript template strings are written with oblique quotes, and variables inside it must have brackets around them (you only had the closing one):
document.getElementById('image_shower').src = `./images/${selected_image}`;
EDIT
Even if in the present case this won't stop your code from working (unless you activate "strict mode"), I also recommend that you use the appropriate keywords to declare your 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}`;
}