I want to make my traffic lights run automatically without any user input. I have created this code so far but the images don't show up please help. My code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lights=["red.jpg","redamber.jpg","green.jpg","amber.jpg"]
var lightscentre= 0;
var timer;
function LightCycle()
{
if(++lightscentre==4)
lightscentre=0

document.getElementById("red").setAttribute("src",lights[lightscentre]);
timer = setTimeout("LightCycle()",1000);
}
function stopCycle()
{
clearTimeout(timer);
}
</script>
</head>
<body>
<img src="red.jpg" name="red" id="red" width=130 height=175>

<form>
<input type="button" value="Cycle" name="Cycle" onclick="LightCycle()">
<input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>
</body>
</html>

Does the first red image show up on pageload? If not, then you know the problem is not with the JavaScript.

When I run the code an outline of the image is shown but the images do not appear?

The issue with your code might be due to the incorrect file paths for the images. Here are a few steps to troubleshoot and fix the problem:

1. First, make sure that the image files (red.jpg, redamber.jpg, green.jpg, and amber.jpg) are located in the same directory as your HTML file. If they are in a different folder, you need to adjust the file paths accordingly.

2. Double-check the file extensions of your image files. Ensure that the extensions are correctly specified in the code (e.g., .jpg, .jpeg, .png, etc.). Case sensitivity matters, so make sure the extensions match exactly.

3. Inspect the console for any error messages. Open your web browser's developer console (usually by pressing F12 or right-clicking and selecting "Inspect") and check for any error messages relating to the image files or their paths. Fix any errors that are displayed.

4. Use absolute file paths. Instead of specifying just the image file names, try using the absolute file paths to ensure that the correct location is referenced. For example, if your HTML file and image files are located in the "images" folder, you can modify the image source like this:

```html
<img src="images/red.jpg" name="red" id="red" width="130" height="175">
```

5. Ensure that the image tags have the correct `id` and `name` attributes. In your code, the `id` and `name` attributes are both set to "red." Make sure that they match and are unique for each image tag. This could prevent the JavaScript code from finding and updating the correct image.

By following these steps and addressing any issues, you should be able to resolve the problem with the images not showing up in your traffic light simulation.