SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Convert a number into a name

    For example, I have <span id="convert">1</span> somewhere on my page.
    Notice the "1", I want to covert "1" into let's say "John" every time the "1" is within a span tag with "convert" as the id.

    I also want "2" to be converted to "Pete". And "3" to be converted to "Bob".

    So if my html is:

    <span id="convert">1</span>
    <span id="convert">2</span>
    <span id="convert">3</span>

    my page reads:

    John
    Pete
    Bob


    Anyone know how to do this?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Have a look at the following fiddle, i threw it together quickly so it can be optimized if needed.

    http://jsfiddle.net/chrisupjohn/jjpgP/

  3. #3
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help SgtLegend. It must not be a popup though.
    For example, you can use it in a sentence on your page:

    <p><span class="convert">1</span> is walking through the streets of New York.</p>

    Which converts into the following text on your page:
    John is walking through the streets of New York.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I have updated the jsFiddle so now it updates the HTML rather then using an alert box.

    Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

  5. #5
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive tested your code. There seems to be something wrong with it though. If I use this:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Convert Number to Name</title>
    </head>
     
    <body>
     
     
    <!-- Convert Number to Name -->
    <script type="text/javascript">
    window.onload = function() {
     
        var e = document.getElementsByTagName('span');
     
        for (var i = 0, l = e.length; i < l; i++) {
            if (typeof e[i].className !== 'undefined' && e[i].className === 'convertNumberToName') {
                e[i].innerHTML = convertToName(e[i].innerHTML);
            }
        }
     
        function convertToName(n) {
            var names = ['John', 'Pete', 'Bob'],
                n = parseInt(n);
     
            if (names[n]) {
                return names[n];
            }
     
            return 'Unknown';
        }
     
    };	
    </script>
     
    <span class="convertNumberToName">1</span><br />
    <span class="convertNumberToName">2</span><br />
    <span class="convertNumberToName">3</span>
     
     
    </body>
    </html>

    I get the following result:



    Pete
    Bob
    Unknown



    1 becomes Pete instead of John
    2 becomes Bob instead of Pete
    and 3 becomes Unknown instead of Bob

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Its because the array starts at 0 not 1 which is why the demo works, the only way around it is to manually define the keys using an object rather then a normal array which is redundant anyway.

  7. #7
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Replacing:

    var names = ['John', 'Pete', 'Bob']

    with:

    var names = ['notUsed', 'John', 'Pete', 'Bob']


    seems to help. It's not a pretty solution, but it works


    Result:

    John
    Pete
    Bob

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    seems to help. It's not a pretty solution, but it works
    A better solution is to leave the array as:
    Code javascript:
    var names = ['John', 'Pete', 'Bob']

    and to increase the index value, to retrieve the appropriate value.

    Code javascript:
    n = parseInt(n, 10) - 1;
    Last edited by paul_wilkins; Aug 22, 2011 at 19:03.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Convert Number to Name</title>
    </head>
     
    <body>
     
     
    <!-- Convert Number to Name -->
    <script type="text/javascript">
    window.onload = function() {
     
        var e = document.getElementsByTagName('span');
     
        for (var i = 0, l = e.length; i < l; i++) {
            if (typeof e[i].className !== 'undefined' && e[i].className === 'convertNumberToName') {
                e[i].innerHTML = convertToName(e[i].innerHTML);
            }
        }
     
        function convertToName(n) {
            var names = ['John', 'Pete', 'Bob'],
                n = parseInt(n, 10) + 1;
     
            if (names[n]) {
                return names[n];
            }
     
            return 'Unknown';
        }
     
    };	
    </script>
     
    <span class="convertNumberToName">1</span><br />
    <span class="convertNumberToName">2</span><br />
    <span class="convertNumberToName">3</span>
     
     
    </body>
    </html>

    I get the following result from that:

    Bob
    Unknown
    Unknown

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Remove 1 from the display value.

    The numbers come in as 1, 2, 3 - and you need to remove 1 from them to being them to 0, 1, 2

    Code javascript:
    n = parseInt(n, 10) - 1;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick! Thank you Paul


Bookmarks

Posting Permissions

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