getElementById.addEventListener loop help

I have created this statement and it does its job but not very efficient.

How can I put this in a loop and populate the information that I want anonymously? I do not want to copy and paste this for every (id) there is on this page.

Locate id get value and use same value to change the bgColor of the page

<input id="red" value="red">red
<input id="green" value="green">green

<script>
document.getElementById('red').addEventListener('click', function (e) {
inputColor = e.target.getAttribute('value'); document.bgColor = inputColor; }, true);
<script>


Your help will be much appreciated! Thanks!

Nevermind... I got it :]

[CODE]
var fm = document.getElementById('form').getElementsByTagName('input');

for (var i=0; i < fm.length; i++)
addEventListener('click', function (e) { inputColor = e.target.getAttribute('value'); document.bgColor = inputColor; }, true);
[CODE]

Ummm...that seems excessive, to me. What happens if you have a radio button in the same <form> that has a value of, say, "credit". You want to set the background color to "credit"?

On top of that, your code won't work in MSIE 8 or below, because the event is not passed to event handler functions as an argument in those browsers.

But all browsers support the use of this to refer to the object the event handler is attached to.

Finally, document.bgColor is considered obsolescent.

How about this:

function setColorButtons( )
{
// gets a *collection* of all fields with name "color"
var colors = document.getElementById("theForm").color;
for ( var c = 0; c < colors.length; ++c )
{
colors[c].onclick = function() { document.style.backgroundColor = this.value; }
}
}
...
<form id="theForm">
<label><input type="checkbox" name="color" value="red"/> Red </label><br/>
<label><input type="checkbox" name="color" value="blue"/> Blue </label><br/>
<label><input type="checkbox" name="color" value="yellow"/> Yellow </label><br/>
<label><input type="checkbox" name="color" value="green"/> Green </label><br/>

<input type="text" name="ThisInputNotSeenInTheLoop" />
</form>

If you prefer using text fields for the things to click on, just change to

<input type="text" name="color" readonly="readonly" value="blue" />

et al.