您可以使用HTML将Javascript变量从一个函数传递给另一个函数吗

Question

I am attempting to pass Javascript from one function to the next through my an onclick() function on my webpage:

Within the first funciton I am writing a table and one part of which creates this cell.

table += "<td><a onclick=assetDetails(assetId) href='#'>"+title+"</a></td>";

This is taking the variable title and passing it to my HTML page as a hyperlink to execute the assetDetails funciton on click.

function assetDetails(assetId){ console.log(assetId); }

My assetDetails function is formatted like the above.

When I click the hyperlink it tells me that the assetId variable is unidentified.

I have tried this:

table += "<td><a onclick=assetDetails("+assetId+") href='#'>"+title+"</a></td>";

This passes the value of my variable and tells me that it is unidentified as well.

Is there any way to do this?

Answer 1

您应该将assestId定义为标记的属性，并在JS中通过getAttribute DOM函数访问该值。

Answer 2

您可能应该用以下引号将assetId变量包装起来：

table += "<td><a onclick=assetDetails('"+assetId+"') href='#'>"+title+"</a></td>";

Answer 3

table += "<td><a onclick=assetDetails(assetId) href='#'>"+title+"</a></td>";

When this is in html assestId will not exists in the scope unless its a global variable in which case why pass it. Perhaps you was trying to do this.

table += "<td><a onclick=assetDetails('" + assetId + "') href='#'>"+title+"</a></td>";

I think you are also missing some quotes.

I would recommend creating your table td using document.createElement("td"). This way you can then assign a onlick to it using addEventListener.

Answer 4

You missed quotes inside the onclick function, try:

table += "<td><a onclick=assetDetails('"+assetId+"') href='#'>"+title+"</a></td>";

This should work because when you create the table string, 'assesId' is known and inserted into the string like:

var assetId = 'test';
var title = 'title';
var tsTest = "<td><a onclick=\"assetDetails('"+assetId+"')\" href='#'>"+title+"</a></td>";

becomes:

<td><a onclick="assetDetails('test')" href='#'>title</a></td>

But : this is the old way of doing this. You could better use the dom api (document.createElement, etc.) or use a library like jQuery:

var link = jQuery("<a href='#'>title</a>");
link.click(function() {
    // assetId is still known when clicked because of js closure
    console.log(assetId);
})