Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Code:
    <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!
    Last edited by copypasteamasta; 08-25-2011 at 10:57 PM.

  • #2
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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]

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,111
    Thanks
    75
    Thanked 4,333 Times in 4,299 Posts
    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:
    Code:
    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
    Code:
        <input type="text" name="color" readonly="readonly" value="blue" />
    et al.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •