SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    How to document.getElementById twice on same page??

    Good morning peeps! I use this to hide my email. Its a web service that asuficates it. I modified it to use document.getElementById. How would I go about using this when I want to have the email address display more than once on the same page? As is it only works on the first id it hits. Obviously I could use the script twice with a different id. But is there a better way?? Thanks!

    Code:
    // Hide Email
    var s="=b!isfg>#nbjmup;dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn#?dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn=0b?";m="";for(i=0; i<s.length; i++)m+=String.fromCharCode(s.charCodeAt(i)-1);document.getElementById('hideemail').innerHTML=(m);

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    I modified it to use document.getElementById. How would I go about using this when I want to have the email address display more than once on the same page?
    A id's are designed to be unique id's, you can use a class name instead.

    Code javascript:
    function hideEmail(el) {
        // hide emails in here, where el is the element containing a hidden email
        ...
    }
     
    var hiddenEmails = document.querySelectorAll('.hideemail'),
        i;
    for (i = 0; i < hiddenEmails.length; i += 1) {
        hideEmail(hiddenEmails[i]);
    }

    So from the code you posted, instead of using document.getElementById('hideemail').innerHTML, in the function you would instead use el.innerHTML
    Last edited by paul_wilkins; Jun 22, 2014 at 14:58. Reason: prefix hideemail with a fullstop in the query selector
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool thank you Paul! I will implement imeadiatly...

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    A id's are designed to be unique id's, you can use a class name instead.

    Code javascript:
    function hideEmail(el) {
        // hide emails in here, where el is the element containing a hidden email
        ...
    }
     
    var hiddenEmails = document.querySelectorAll('hideemail'),
        i;
    for (i = 0; i < hiddenEmails.length; i += 1) {
        hideEmail(hiddenEmails[i]);
    }

    So from the code you posted, instead of using document.getElementById('hideemail').innerHTML, in the function you would instead use el.innerHTML
    Ok I know this isn't correct. But how do I replace the get element by id bit and make this correct? Thnaks!

    Code:
    <script type="text/JavaScript">
    function hideEmail(el) {
        var s="=b!isfg>#nbjmup;dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn#?dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn=0b?";m="";for(i=0; i<s.length; i++)m+=String.fromCharCode(s.charCodeAt(i)-1);document.getElementById('hideemail')el.innerHTML=(m);
    }
     
    var hiddenEmails = document.querySelectorAll('hideemail'),
        i;
    for (i = 0; i < hiddenEmails.length; i += 1) {
        hideEmail(hiddenEmails[i]);
    }
    </script>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I had a minor spelling mistake in my above code.

    It's a css selector that you use in the querySelector, so if it's an id then you prefix the name with #, and if it's a class then you prefix it with a fullstop.
    To select all elements with a class of hideemail, you would use document.querySelectorAll('.hideemail')

    So what you should do is to replace the id="hidemail" from your HTML with class="hideemail"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    I had a minor spelling mistake in my above code.

    It's a css selector that you use in the querySelector, so if it's an id then you prefix the name with #, and if it's a class then you prefix it with a fullstop.
    To select all elements with a class of hideemail, you would use document.querySelectorAll('.hideemail')

    So what you should do is to replace the id="hide mail" from your HTML with class="hideemail"

    Ok I can't seem to get it working. Lets do this! Here is the full test page. Can you see my mistake?

    Code:
    <!DOCTYPE html><html><head><meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    /* --- Contact --- */
    .hideemail {
    word-break:break-word;
    }
    .hideemail b {
    display:none;
    }
    </style>
    
    </head>
    <body>
    
    <span class="hideemail">test.com</span>
    
    <br>
    <br>
    
    <span class="hideemail">test.com</span>
    
    <script type="text/JavaScript">
    function hideEmail(el) {
        // Hide Email
    var s="=b!isfg>#nbjmup;dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn#?dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn=0b?";m="";for(i=0; i<s.length; i++)m+=String.fromCharCode(s.charCodeAt(i)-1);document.querySelectorAll('.hideemail')el.innerHTML=(m);
    }
     
    var hiddenEmails = document.querySelectorAll('.hideemail'),
        i;
    for (i = 0; i < hiddenEmails.length; i += 1) {
        hideEmail(hiddenEmails[i]);
    }
    </script>
    </body>
    </html>

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    Can you see my mistake?
    Yes I can.



    And to be more helpful, it resides in the hideEmails function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Yes I can.



    And to be more helpful, it resides in the hideEmails function.
    Come on bro throw me a bone. Can you please tell me how to fix? I do not know.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Yes I can.
    Aw man, and I was about to post the solution

    To expand on the above, use your browser console to check the page for errors.
    Also, if you use proper indentation then things will become more apparent.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ok, in absence of any further posts, here you go:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Email obfuscation</title>
      </head>
    
      <body>
        <span class="hideemail">test.com</span><br><br>
        <span class="hideemail">test.com</span>
    
        <script type="text/JavaScript">
          function hideEmail(el) {
            var s="=b!isfg>#nbjmup;dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn#?dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn=0b?",
                m="";
    
            for(var i=0; i < s.length; i++){
              m += String.fromCharCode(s.charCodeAt(i)-1);
              el.innerHTML=(m);
            }
          }
           
          var mailAddresses = document.querySelectorAll('.hideemail');
          for (var i = 0; i < mailAddresses.length; i += 1) {
              hideEmail(mailAddresses[i]);
          }
        </script>
      </body>
    </html>
    HTH

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    HTH
    Hmm - wouldn't it be better to leave the innerHTML out of the for loop, and do it afterwards - or is this a rabbit hole the like of which we do not want to get in to?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    I was leaving the whole "is this even a good idea" side of things alone.
    I just refactored the code until it worked and then posted it after the conversation went quiet.

    But you're right, having it within the for loop is superfluous.
    Well spotted

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Ok, in absence of any further posts, here you go:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Email obfuscation</title>
      </head>
    
      <body>
        <span class="hideemail">test.com</span><br><br>
        <span class="hideemail">test.com</span>
    
        <script type="text/JavaScript">
          function hideEmail(el) {
            var s="=b!isfg>#nbjmup;dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn#?dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn=0b?",
                m="";
    
            for(var i=0; i < s.length; i++){
              m += String.fromCharCode(s.charCodeAt(i)-1);
              el.innerHTML=(m);
            }
          }
           
          var mailAddresses = document.querySelectorAll('.hideemail');
          for (var i = 0; i < mailAddresses.length; i += 1) {
              hideEmail(mailAddresses[i]);
          }
        </script>
      </body>
    </html>
    HTH
    Thank you very much bro. So how should I remove the inner HTML from the for loop?

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Simples

    Take this line:

    Code:
    el.innerHTML=(m);
    and place it after the for loop.

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Simples

    Take this line:

    Code:
    el.innerHTML=(m);
    and place it after the for loop.
    At the risk of sounding stupid - like this?

    Code:
    <!DOCTYPE html><html><head><meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    /* --- Contact --- */
    .hideemail {
    word-break:break-word;
    }
    .hideemail b {
    display:none;
    }
    </style>
    </head>
    <body>
    <span class="hideemail">test.com</span>
    <br>
    <br>
    <span class="hideemail">test.com</span>
    <script type="text/JavaScript">
          function hideEmail(el) {
            var s="=b!isfg>#nbjmup;dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn#?dpoubduAopsuitboejfhpqspqfsuznbobhfnfou/dpn=0b?",m="";
            for(var i=0; i < s.length; i++){
              m += String.fromCharCode(s.charCodeAt(i)-1);
            }
    		el.innerHTML=(m);
          }
          var mailAddresses = document.querySelectorAll('.hideemail');
          for (var i = 0; i < mailAddresses.length; i += 1) {
              hideEmail(mailAddresses[i]); 
    	  }
        </script>
    </body>
    </html>
    And above see you said this may not even be a good idea? Are you referring to the code or the method of email absofication? Because I find it to work perfect as a spam deterrent. Thanks!

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi Eric,

    [QUOTE=PicnicTutorials;5674718]At the risk of sounding stupid - like this?

    Code:
    for(var i=0; i < s.length; i++){
      m += String.fromCharCode(s.charCodeAt(i)-1);
    }
    el.innerHTML=(m);
    Yes

    Quote Originally Posted by PicnicTutorials View Post
    And above see you said this may not even be a good idea? Are you referring to the code or the method of email absofication?
    I meant more that it has accessibility issues and it's effectiveness has been called into question.
    Obfuscate no more: why your email address should go au naturale

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=Pullo;5675370]Hi Eric,

    Quote Originally Posted by PicnicTutorials View Post
    At the risk of sounding stupid - like this?

    Code:
    for(var i=0; i < s.length; i++){
      m += String.fromCharCode(s.charCodeAt(i)-1);
    }
    el.innerHTML=(m);
    Yes



    I meant more that it has accessibility issues and it's effectiveness has been called into question.
    Obfuscate no more: why your email address should go au naturale
    Thnaks Pullo


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
  •