How to pass objects to a javascript function from HTML href link? - Stack Overflow

function createListItem(text1) {
    var link = document.createElement("a");
    var text = text1;
    link.setAttribute("name", text);
    link.setAttribute("href", "javascript:updateLevel1(text)");
    //link.setAttribute("onclick", "updateLevel1()");
    var list_item = document.createElement("li");
    var list_text = document.createTextNode(text);
    list_item.appendChild(list_text);
    link.appendChild(list_item);
    return link;
}

function updateLevel1(text) {
    clearNavFrame2();
    var link = document.createElement("a");
    link.setAttribute("name", text);
    link.setAttribute("href", "javascript:updateLevel1(text)");
    link.appendChild(document.createTextNode(text));
    document.getElementById("navigation_frame1").appendChild(link);
}

Here i want to pass the object text to the function updateLevel1 when i dynamically created an HTML link but unfortunately above code is not working. The function updateLevel1 is not able to figure out the object text. Am i doing something wrong?

function createListItem(text1) {
    var link = document.createElement("a");
    var text = text1;
    link.setAttribute("name", text);
    link.setAttribute("href", "javascript:updateLevel1(text)");
    //link.setAttribute("onclick", "updateLevel1()");
    var list_item = document.createElement("li");
    var list_text = document.createTextNode(text);
    list_item.appendChild(list_text);
    link.appendChild(list_item);
    return link;
}

function updateLevel1(text) {
    clearNavFrame2();
    var link = document.createElement("a");
    link.setAttribute("name", text);
    link.setAttribute("href", "javascript:updateLevel1(text)");
    link.appendChild(document.createTextNode(text));
    document.getElementById("navigation_frame1").appendChild(link);
}

Here i want to pass the object text to the function updateLevel1 when i dynamically created an HTML link but unfortunately above code is not working. The function updateLevel1 is not able to figure out the object text. Am i doing something wrong?

• javascript
• html

Share Follow edited Nov 26, 2011 at 16:44 Madara's Ghost 175k5050 gold badges272272 silver badges314314 bronze badges asked Nov 26, 2011 at 16:41 Mandar JoshiMandar Joshi 7311 gold badge22 silver badges88 bronze badges 2

• You may use jquery. It could ease your coding much. In this case you could take a look at api.jquery./jQuery.data – user920041 Commented Nov 26, 2011 at 16:50
• yea i thought about jquery but when i went through some code of jquery it looked hard to understand and i wanted to use only basic functionalities of jscript. but anyway thanks for suggestion! – Mandar Joshi Commented Nov 26, 2011 at 17:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Yes, you're doing something incorrectly. First, instead of setting the "href" attribute, you can add a "click" handler to the element:

var link = document.createElement('a');
link.onclick = function() { updateLevel1(text); };

There's really no reason to use "javascript:" URLs in a case like this.

Now, another problem you've got is that you create that <a> element but you don't append it to the document (in the code you posted). I suppose that somewhere, you use the return value from the "createListItem()" function and append it then. If not, well, nothing will really happen.

The reason that your "javascript:" value for "href" doesn't work is that you're setting up a situation wherein the browser will create a function from that string when the <a> is clicked. At that point, the local variable "text" from that function is long gone. When you use an actual function reference bound to the "onclick" property of the <a>, however, your function will retain access to that variable in its closure.

Just use an event handler:

function createListItem(text1) {
    var link = document.createElement("a");
    var text = text1;
    link.setAttribute("name", text);
    link.setAttribute("href", "#");

    link.onclick = function(){
    updateLevel1( text );
    return false;
    };

    var list_item = document.createElement("li");
    var list_text = document.createTextNode(text);
    list_item.appendChild(list_text);
    link.appendChild(list_item);
    return link;
}

function updateLevel1(text) {
    clearNavFrame2();
    var link = document.createElement("a");
    link.setAttribute("name", text);

        link.onclick = function(){
        updateLevel1( text );
        return false;
        };
    link.setAttribute("href", "#" );
    link.appendChild(document.createTextNode(text));
    document.getElementById("navigation_frame1").appendChild(link);
}

You'll need to break your string and insert the value text has literally.

link.setAttribute("href", "javascript:updateLevel1('" + text + "')");

Just be careful - you may need to clean text if it contains any single quotes.

If this is a possibility you'll want to run something like text = text.replace("'", "\\'");

Try link.setAttribute("href", "javascript:updateLevel1(this);

Then you read it inside your function by its reference. eg:

function updateLevel1(elm) {
    clearNavFrame2();
    var link = document.createElement("a");
    link.setAttribute("name", elm.name);  
    ...
}