I'm playing around with click events, and I notice that this function works only the first time. Why is that? How can I make it so that it is possible to continuously swap id's between two elements? 

And, would there be a dramatic change in approach if one were to pass id's along among a larger number of elements?

I'm not using jQuery at all. Thanks. 

```js
 window.onload = function() {
 document.addEventListener('click', function(e) {
   document.getElementById("purpleSquare").id = 'redSquare';
   document.getElementById("redSquare").id ="purpleSquare";
 })
};
```

```css
#redSquare {
 background-color: red;
    width: 20px;
    height: 20px;
}
#purpleSquare {
 background-color: purple;
    width: 20px;
    height: 20px;
}
```

```html
        <div id="redSquare"></div>

        <div id="purpleSquare"></div>
```