2
\$\begingroup\$

This function creates a series of links at a desired destination by the usage of a premade tag system.

Usage:

  • createMyTAGS_DATA passes in a single line of all the links as: LinkText;LinkAddress;;
  • createMyTAGS_LOCATION passes the destination to a div,span,... to render the result

Result would be:

<a href="LindAddress1">LinkText1</a><a href="LindAddress2">LinkText2</a> [...]

Note: each of tag(LinkText;LinkAddress;;) must have more than 10 characters.

<span onclick="createMyTAGS('LinkText1;LinkAddress1;;LinkText2;LinkAddress2;;','renderHERE');" style="cursor:pointer;"><b>click here</b></span>

<div id="renderHERE"></div>

<script>
    function createMyTAGS(createMyTAGS_DATA,createMyTAGS_LOCATION){
    try{ var linkTags = createMyTAGS_DATA;
         var v1 = createMyTAGS_LOCATION;
    while (linkTags !== '' && linkTags.indexOf(";;") > 10){
    var linkNew = linkTags.slice(0, linkTags.indexOf(";;"));
    var linkText = linkNew.slice(0, linkNew.indexOf(";"));
    linkTags = linkTags.replace(linkNew+';;', '');
    linkNew = linkNew.replace(linkText+';', '');
    linkNew = '<a href="'+linkNew+'" title="'+linkNew+'" target="_blank">'+
              linkText+'</a> ';
    document.getElementById(v1).innerHTML = 
    document.getElementById(v1).innerHTML + linkNew;
    }
    }catch(err){alert('createMyTAGS: '+err.message+
    '; - statement('+createMyTAGS_DATA+','+createMyTAGS_LOCATION+')')}
    }
</script>

\$\endgroup\$
2
\$\begingroup\$

From a once over;

  • Indent your code, it will be easier to read
  • Use lowerCamelCase for your names createMyTAGS -> createMyTags, though personally I would call the function createLinks
    • I would call createMyTAGS_DATA simply s for string or data
    • I would call createMyTAGS_LOCATION either id or element or elementID, you wont then feel the need to assign that parameter to the slightly better named linkTags
  • For your string handling, you should read up on .split(), it would make this so much easier
  • alert statements are terrible, this function should never go wrong. Consider using console.log instead if you must.
  • If you have long variables or chained variables (which you should avoid), consider +=:
    document.getElementById(v1).innerHTML = document.getElementById(v1).innerHTML + linkNew; becomes
    document.getElementById(v1).innerHTML += linkNew;
  • Consider using addEventListener instead of assigning the event listener straight into the HTML

My counter proposal:

function createLinks(data, elementId){
      
    var element = document.getElementById(elementId),
        links = data.split(';;'),
        html = element.innerHTML,
        linkParts, url, text;
  
    links.forEach( function( link ){
        linkParts = link.split(';');
        text = linkParts[0];
        url = linkParts[1];
        html += '<a href="'+url+'" title="'+text+'" target="_blank">'+text+'</a> ';   
    });

    element.innerHTML = html;
}
<span onclick="createLinks('LinkText1;LinkAddress1;;LinkText2;LinkAddress2;;','renderHERE');" style="cursor:pointer;"><b>click here</b></span>

<div id="renderHERE"></div>

\$\endgroup\$
  • \$\begingroup\$ from a once again. the original production of my participation with fully functional code, has nothing to do with this that i didn't did. make sure to exclude myself so to make it yours. the TAG is the key functionally of the code and has nothing to o with anchors. unbelievable \$\endgroup\$ – Nickname Nov 21 '14 at 23:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.