2 
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?

Improve this question
2
  • You may use jquery. It could ease your coding much. In this case you could take a look at api.jquery.com/jQuery.data 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! Commented Nov 26, 2011 at 17:35

4 Answers 4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

the problem with using the onclick is that, if i dont mention the href attribute of element a then it will not display the element at all on the web page (i experienced it). and if i mention the href attribute along with the onclick then what should i put at those two places. So i used only the href attribute for calling jscript method. and regarding the append, yes i am appending it to the document in another function :)
My browser (Firefox) certainly displays the contents of <a> tags whether or not they have an "href" attribute. You can always use "#" for the href if you must have one.
1

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);
}
Improve this answer

1 Comment

This is also a good option. I did not know about this functionality link.setAttribute("href", "#"); I will try this once. Thanks :)
0

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("'", "\\'");

Improve this answer

1 Comment

Yea the below worked link.setAttribute("href", "javascript:updateLevel1('" + text+"')"); Thanks adam. You are great.
0

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);  
    ...
}
Improve this answer

2 Comments

i tried using the object this but it don't work. I read somewhere that it passes the object of window instead of the html element.
Pointy is right, you shouldn't do that. Use plein Javascript with link.onclick = ...or inline if necessary <a href="javascript:" onclick="updateLevel1(this)>...</a> but please not this string ugliness.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.