JavaScript TrafficLights image change not working
<p>I'm doing an investigation project at school and I need to make traffic lights in JavaScript. I have got PNG images of the different stages in a traffic light and I want to switch between them when a button is clicked. This is what I have written but I cant seem to find any mistakes. This is the first time I'm doing JavaScript and I am on a time limit. Please respond ASAP </p>

<p>thank you very much.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;body&gt;
    &lt;script&gt;
        var lights = [
            "Assets/TrafficLight1.png",
            "Assets/TrafficLight2.png",
            "Assets/TrafficLight3.png",
            "Assets/TrafficLight4.png"
        ];

        var i = 0;
        function ChangeLights() {
            document.getElementById("TrafficLight1").src = lights[i];

            if (i = 4) {
                i = 0;
            } else {
                i = i + 1;
            }
        }
    &lt;/script&gt;

    &lt;button onclick="ChangeLights()"&gt;Click To Change&lt;/button&gt;
    &lt;img src ="Assets/TrafficLight1.png" alt="trafficlight" name="TrafficLight1" width ="200"  height= "400" id="TrafficLight1"&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>