Using TAGS with <script> on your websites

Question

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>

konijn · Accepted Answer · 2014-11-21 21:19:12Z

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>

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 — Nickname
– Nickname, Commented Nov 21, 2014 at 23:38

Stack Exchange Network

Using TAGS with <script> on your websites

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Using TAGS with <script> on your websites

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions