www.webdeveloper.com
Results 1 to 6 of 6

Thread: Dynamic ID for images

  1. #1
    Join Date
    Nov 2008
    Posts
    5

    Dynamic ID for images

    Is there a way to change each ID dynamically of each image, by using replace()?

    I've made a script which replaces each comma with an image tag, for example:

    ,0,0,2,3,6,1,0,0,0,1

    to

    <img src=0.gif><img src=0.gif><img src=2.gif> etc.

    I'm using:
    replace(/,/gi,'.gif"><img src="')
    to accomplish this.

    But I want to give each <img> a different ID.
    Each ID building up by +1.

    <img src=0.gif id=IMG0><img src=0.gif id=IMG1><img src=2.gif id=IMG2> and so on.


    I've got some ideas, but I cannot seem to get it to work and I'm really stuck..

    I'd appreciate any help,
    thanks in advance!

  2. #2
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    The thing I would have to ask is do you have to only use replace() ?? The only way I would know then is to add more special characters as well as adding the incremented numbers for the id's using ~id number here: into the string and then it complicates things and gets rather ugly as you have to use multiple replace's. Especially if you are needing to programmatically build the string to begin with, as you would need a loop to add the numbers and characters in to the string first, which would be kinda silly. This would be an example with the string manually built first (it's ugly -ick):

    Code:
    var tagString = "0,~0:0,~1:2,~2:3,~3:6,~4:1,~5:0,~6:0,~7:0~8:,~9:1,~10"
    tagString = '<img src="' + tagString.replace(/,/gi,'.gif"').replace(/~/g,' id="IMG').replace(/:/g,'"><img src="') + '">';
    
    alert(tagString);
    A whole lot prettier way (this is the kind of thing loops are for to begin with):

    Code:
    var numStr = ',0,0,2,3,6,1,0,0,0,1';
    var numArr = numStr.replace(/,/g,'').split(''); //Note if the string were just '0023610001', would not need the replace() here, but still need the split('')
    var i = 0, newStr = '';
    while (i < numArr.length) {
        newStr += '<img src="'+numArr[i]+'.gif" id="IMG'+i+'">';
        i++;
    }
    
    alert(newStr);
    Last edited by astupidname; 12-29-2008 at 08:04 AM.

  3. #3
    Join Date
    Aug 2006
    Posts
    68
    or try:

    HTML Code:
    num = 0
    replace(/,/gi,'.gif"><img id="IMG' + (num++) + '" src="')
    though astupidname's solution is more elegant and readable.

  4. #4
    Join Date
    Nov 2008
    Posts
    5
    Quote Originally Posted by astupidname View Post
    The thing I would have to ask is do you have to only use replace() ?? The only way I would know then is to add more special characters as well as adding the incremented numbers for the id's using ~id number here: into the string and then it complicates things and gets rather ugly as you have to use multiple replace's. Especially if you are needing to programmatically build the string to begin with, as you would need a loop to add the numbers and characters in to the string first, which would be kinda silly. This would be an example with the string manually built first (it's ugly -ick):

    Code:
    var tagString = "0,~0:0,~1:2,~2:3,~3:6,~4:1,~5:0,~6:0,~7:0~8:,~9:1,~10"
    tagString = '<img src="' + tagString.replace(/,/gi,'.gif"').replace(/~/g,' id="IMG').replace(/:/g,'"><img src="') + '">';
    
    alert(tagString);
    A whole lot prettier way (this is the kind of thing loops are for to begin with):

    Code:
    var numStr = ',0,0,2,3,6,1,0,0,0,1';
    var numArr = numStr.replace(/,/g,'').split(''); //Note if the string were just '0023610001', would not need the replace() here, but still need the split('')
    var i = 0, newStr = '';
    while (i < numArr.length) {
        newStr += '<img src="'+numArr[i]+'.gif" id="IMG'+i+'">';
        i++;
    }
    
    alert(newStr);
    Well, I've got a text box where someone would fill in the code (0,1,2,3,5 etc).
    And click a button, which converts the number line into images in a table using:

    tableid.innerHTML="tableid.innerHTML='' + textbox.value + '';
    tableid.innerHTML="table.innerHTML.replace(/,/gi,'.gif"><img src="');


    You're second script is ALMOST perfect for me!
    Except, because it removes all the commas, it sees larger numbers as separate numbers.

    Like if it's 6,21,5,133 - it'll end up like:

    <img src="6.gif" id="IMG0"><img src="2.gif" id="IMG1"><img src="1.gif" id="IMG2"><img src="5.gif" id="IMG3"><img src="1.gif" id="IMG4"><img src="3.gif" id="IMG5"><img src="3.gif" id="IMG6">


    Quote Originally Posted by s.b37 View Post
    or try:

    HTML Code:
    num = 0
    replace(/,/gi,'.gif"><img id="IMG' + (num++) + '" src="')
    though astupidname's solution is more elegant and readable.
    Thanks for the tip, I've tried this also.
    It kind of works, but it'll only work for the first <img>.. which is weird.

  5. #5
    Join Date
    Nov 2008
    Posts
    5
    Nevermind, I've found a solution.

    Thanks so much for your help!

  6. #6
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    You're second script is ALMOST perfect for me!
    Except, because it removes all the commas, it sees larger numbers as separate numbers.

    Like if it's 6,21,5,133
    Yes you are right I goofed on that, I suspected I did not have something quite right, but did not put any more effort in to it at the time! Sorry..

    num = 0
    replace(/,/gi,'.gif"><img id="IMG' + (num++) + '" src="')
    That can not work (I actually had tried the same thing once) because the replace() is only evaluated once. So the num++ occurs only once -not once for each instance of it's location in the string.

    Nevermind, I've found a solution.

    Thanks so much for your help!
    Well, you are welcome for thanking me for my partially inadequate help!
    I am curious what solution you came up with, as I re-thought the problem and came up with another (better, dare I say nearly perfect?) solution. Even though you got something going now, have a try with the example below. I purposely garbled the string up just to show the power of regEx to extract only the numbers correctly:

    Code:
    <script type="text/javascript">
    //I threw extra commas and other ugly junk in numStr here just to show 
    //that the extras will be irrelevant using the match method with regEx
    
    var numStr = ',!,0,0),22,37,$$,,6,1,aa0,20,@0,1,,237';
    var numArr = numStr.match(/\d+/g); //will match only digits or multiple simultaneous digits and create array of them
    var i = 0, newStr = '';
    while (i < numArr.length) {
        newStr += '<img src="'+numArr[i]+'.gif" id="IMG'+i+'">';
        i++;
    }
    
    var testTxt = "numStr: " + numStr + "\n\n( ignore the commas below, ";
    testTxt += "numArr is an array of numbers only )\n\nnumArr array of numbers: "+numArr;
    testTxt += "\n\nnewStr: \n"+newStr;
    alert(testTxt);
    
    </script>

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