Change link text on click, links dynamicly made

[Angel78]

So I have been wrestling quite some time with this and starting to stare myself blind here.

Maybe this is trivial and I bet I am missing something basic so here goes.

I have a simple html document with two paragraphs, both are class=show with the id's: id=show1 & id:show2, in the .css file I have .show { display:none; }.

So on to my problem, When I expand the text I want my link to switch text to 'Hide information' (Dölj information to be exact) and when I collapse it, then it should revert back to 'Show more information' (Visa mera information to be exact)

When I had the links inside the html document this was ok but when I moved both links inside the Javascript file and created them dynamicly it did not work anymore and I get a error with null statement.

Here is my Javascript:

function newLink() {
    //Create the link
    newLink = document.createElement('a');
    //Give the link a Id
    newLink.id = 'show1_link';
    //Set the href
    newLink.href = 'javascript:showHide(this.id,elemId)';
    //Create a variable for the link text
    var linkText = document.createTextNode('Visa mera information');
    //Append the text to the link
    newLink.appendChild(linkText);
    //Create a variable for the paragraph
    var elem = document.getElementById('show1')
    //Insert the text before the paragraph with the Id show2
    elem.parentNode.insertBefore(newLink,show1);
}
addLoadEvent(newLink);

function showHide(link_id,elemId) {
    var link = document.getElementById(link_id);
    var text = document.getElementById(elemId);
    //Make the switch from none -> block & back
    text.style.display = (text.style.display == 'block') ? 'none' : 'block';
    //Check the status of the text
    var status = (text.style.display == 'block') ? 'none' : 'block';
    text.style.display = status;
    //Change the text accordingly
    link.innerHTML = (status == 'block') ? 'Dölj information' : 'Visa mera infomration';
}
addLoadEvent(showHide);

The link and function works if I remove the variables and display status but then it does not change the link text. The text.style.display returns null, what I don't get is that this script worked with the links hard coded into the html document.

Any help appreciated.

[mrnutty]

First problem, your function name and variable are same, more specifically, newLink is declared as a function then inside, you have newLink as variable. Change the variable name to something else like newLinkElement.

[Angel78]

Ok So I updated the variable to newLinkElement but it throws me the error "elemId is not defined".

function newLink() {
    //Make a few safety check to see if the browser can handle the elements
    if (!document.getElementById) {
        if (!document.createElememt) {
            if (!document.createTextNode) {
            return false;
            }
        }
    }
    //Create the link
    newLinkElement = document.createElement('a');
    //Give the link a Id
    newLinkElement.id = "show1_link";
    //Set the href
    newLinkElement.href = 'javascript:showHide(this.id,elemId)';
    //Create a variable for the link text
    var linkText = document.createTextNode('Visa mera information');
    //Append the text to the link
    newLinkElement.appendChild(linkText);
    //Create a variable for the paragraph
    var elem = document.getElementById('show1')
    //Insert the text before the paragraph with the Id show1
    elem.parentNode.insertBefore(newLinkElement,show1);
}
addLoadEvent(newLink);

function showHide(link_id,elemId) {
    var link = document.getElementById(link_id);
    var text = document.getElementById(elemId);
    text.style.display = (text.style.display == 'block') ? 'none' : 'block';
    var status = (text.style.display == 'block') ? 'none' : 'block';
    text.style.display = status;
    link.innerHTML = (status == 'block') ? 'Dölj information' : 'Visa mera infomration';
}

[Angel78]

I found the elemId definition under the links href it should read (this.id,'show1'); where show1 is the paragraphs id.

The function works but throws me an error in the function showHide at var status and innerHTML, say "link is null". If I comment out those two the showHide function does what it is supposed to but does not change my link text.

So updated code:

function newLink() {
    //Make a few safety check to see if the browser can handle the elements
    if (!document.getElementById) {
        if (!document.createElememt) {
            if (!document.createTextNode) {
            return false;
            }
        }
    }
    //Create the link
    newLinkElement = document.createElement('a');
    //Give the link a Id
    newLinkElement.id = 'show1_link';
    //Set the href
    newLinkElement.href = "javascript:showHide(this.id,'show1')";
    //Create a variable for the link text
    var linkText = document.createTextNode('Visa mera information');
    //Append the text to the link
    newLinkElement.appendChild(linkText);
    //Create a variable for the paragraph
    var elem = document.getElementById('show1')
    //Insert the text before the paragraph with the Id show1
    elem.parentNode.insertBefore(newLinkElement,show1);
}
addLoadEvent(newLink);

function showHide(link_id,elemId) {
//function showHide(link_id,elemId) {
    var link = document.getElementById(link_id);
    var text = document.getElementById(elemId);
    text.style.display = (text.style.display == 'block') ? 'none' : 'block';
    var status = (text.style.display == 'block') ? 'none' : 'block';
    //text.style.display = status;
    //link.innerHTML = (status == 'block') ? 'Dölj information' : 'Visa mera infomration';
}

I wish there was a edit button :-)

[Angel78]

Solved my problem but it feels like it's not that great, I would like a single link function instead of making two almost identical ones. Reason I made two is because of the paragraph id as they are different for the sole reason that I should be able to position the second link above the second paragraph.

I had to specificly type out the id on the links .href and I don't like that, tbh I would like to be able to use

a.href = "javascript:showHide(this.id,'show1')";

or better yet

a.href = 'javascript:showHide(this_id,elemId)';

The problem would be assigning a different id to each link but is solved using an array if i'm not mistaken. So if anyone has a more simple solution to this I would love to learn about it.

But for futher reference I will just put up the code I managed to get working, not optimal imo because of two link functions

/* Function created by "Simon Willson" to be able to 
    call several functions with a single event */

//Create the function
function addLoadEvent(func) {
    //Create a variable for window.onload event
    var oldonload = window.onload;
    //If window.onload is NOT a function, then assign 'func' to window.onload
    if (typeof window.onload != 'function') {
        window.onload = func;
    //If window.onload already is a function then make a new function
    } else {
        window.onload = function() {
        //To do what the old onload function did
        if (oldonload) {
        oldonload();
        }
        //then do whatever the new function does 
        func();
        }
    }
}
//Add as many functions you like with addLoadEvent(functionName);


//Create the show/hide function
function showHide(link_id,elemId) {
    //Make a variable for the link (link_id) and for the paragraph (elemId)
    var link = document.getElementById(link_id);
    var text = document.getElementById(elemId);
    //If the content is hidden set the link text to 'Visa mera infomration'
    if (text.style.display == 'block') {
    link.innerHTML = 'Visa mera information';
    text.style.display = 'none';
    //if content is visible change the link text to 'Dölj information'
    } else {
    link.innerHTML = 'Dölj information';
    text.style.display = 'block';
    }
}

//Create two links, link1 & link2 and position them before each relevant paragraph element
function newLink() {
    //Make a few safety check to see if the browser can handle the elements
    if (!document.getElementById) {
        if (!document.createElememt) {
            if (!document.createTextNode) {
            return false;
            }
        }
    }
    //Create the link
    a = document.createElement('a');
    //Give the link a Id
    a.id = 'show1_link';
    //Set the href
    a.href = "javascript:showHide('show1_link','show1')";
    //Create a variable for the link text
    var linkText = document.createTextNode('Visa mera information');
    //Append the text to the link
    a.appendChild(linkText);
    //Create a variable for the paragraph
    var elem = document.getElementById('show1')
    //Insert the text before the paragraph with the Id show1
    elem.parentNode.insertBefore(a,show1);
}
addLoadEvent(newLink);

function newLink2() {
    //Create the link
    a = document.createElement('a');
    //Give the link a Id
    a.id = 'show2_link';
    //Set the href
    a.href = "javascript:showHide('show2_link','show2')";
    //Create a variable for the link text
    var linkText = document.createTextNode('Visa mera information');
    //Append the text to the link
    a.appendChild(linkText);
    //Create a variable for the paragraph
    var elem = document.getElementById('show2')
    //Insert the text before the paragraph with the Id show2
    elem.parentNode.insertBefore(a,show2);
}
addLoadEvent(newLink2);

[Bachu]

Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text-Link-Exg</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<a href="#NOD" class="showSections" rel="show">Show information</a>
<div class="catSections" style="display: none;">
<h1>Helloo</h1>
</ul>
</div>

<script type="text/javascript">
$(function(){
    $('.showSections').live('click', function() {
            if($(this).attr('rel')=='show'){
                $('.catSections').fadeIn();
                $('.showSections').attr('rel','hide');
                $('.showSections').html('Hide information');
            }
            else if ($(this).attr('rel')=='hide') {
                $('.catSections').fadeOut();
                $('.showSections').attr('rel','show');
                $('.showSections').html('Show information');
            }
    });
});
</script>
</body>
</html>

[mrnutty]

Instead of making two different functions, make the function take an argument and adjust

function createLink(linkId,ElemId){
    //saftey check
    //Create the link
    a = document.createElement('a');
    //Give the link a Id
    a.id = linkId;
    //Set the href
    a.href = "javascript:showHide(linkId,elemId)";
    //Create a variable for the link text
    var linkText = document.createTextNode('Visa mera information');
    //Append the text to the link
    a.appendChild(linkText);
    //Create a variable for the paragraph
    var elem = document.getElementById('show2')
    //Insert the text before the paragraph with the Id show2
    elem.parentNode.insertBefore(a,show2);
}
function populateLinks(){
    createLink('show1_link','show1');
    createLink('show2_link','show2');
}