www.webdeveloper.com
Results 1 to 2 of 2

Thread: Code only added to last object element in iteration

Hybrid View

  1. #1
    Join Date
    Mar 2010
    Location
    Finland
    Posts
    84

    Code only added to last object element in iteration

    I want to add a:link tag after each p tag, and came up with this...

    http://jsfiddle.net/UqDJk/348/

    The problem is, only the last element in the object array receives the a:link when I expected the for loop to inject one into each iteration.

    What's wrong with it?

    Thanks.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Add unlock.png</title>
    <style type="text/css">
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:12px;padding-top:20px;}
    a:link,a:active,a:visited{text-decoration:none;font-weight:bold;background-color:transparent;color:Navy;font-family:Georgia,Verdana;font-size:11px;}
    a:hover{text-decoration:none;font-weight:bold;background-color:transparent;color:Crimson;}
    span{color:Crimson;font-weight:bold;margin-left:10px;}
    span.null{color:Green;}
    i{color:Darkorange;font-size:10px;}
    </style>
    <script type='text/javascript'>//<![CDATA[ 
    window.addEventListener('load', function() {
    // Decrypt button
    function decrypt_click(referenceNode){
    var dc = document.createElement('a'); 
    // Add other attributes. 
    dc.style = "float:right"; 
    dc.href = "#";
    dc.innerHTML = '<br><img src="https://cdn1.iconfinder.com/data/icons/iconza/iconza_16x16_0097d9/unlock.png"> Decrypt text';
    dc.innerHTML += ' <i>(for the node having id = '+referenceNode.id+')</i>';// just to make sure everything works
    referenceNode.parentNode.insertBefore(dc, referenceNode.nextSibling);
    }
    // All messages that are found need to be given a decrypt option. 
    var encrypted_msg = document.querySelectorAll('span.null p');
    
    for(var i = 0; i < encrypted_msg.length; i++){
    encrypted_msg[i].setAttribute('id', 'decrypt_'+i); // ids are created here because there are more than one. 
    encrypted_msg[i].innerHTML+=' <i>(id = '+'decrypt_'+i+')</i>'; // just to make sure everything works
    decrypt_click(encrypted_msg[i]);
    } 
    });//]]>  
    
    </script>
    </head>
    <body>
    <span class="null"><p>encrypted msg</p></span>
    <span class="null"><p>encrypted msg</p></span>
    <span class="null"><p>encrypted msg</p></span>
    <span><p>non-encrypted msg</p></span>
    <span class="null"><p>encrypted msg</p></span>
    <span><p>non-encrypted msg</p></span>
    <span class="null"><p>encrypted msg</p></span>
    <span class="null"><p>encrypted msg</p></span>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles