JavaScript: variable name unresolved

Question

I wrote the following JS code:

function downloadFile(dataItem) {
    ....
}
....
for (var r = 0; r < dataItems.length ; r++) {
    table += '<tr>';
    var listOfAttributes = ['CarModel', 'BusMapping', 'Date_', 'Location_', 'Comments', 'AttackTraffic', 'IsTagged']
    **table +='<td> <a onclick="downloadFile(dataItems[r])" href="#">' + dataItems[r]['FileName']['S'] +'</a></td>';**
    for (var c = 0; c < Object.keys(dataItems[0]).length-1 ; c++) {
        table +='<td>' + dataItems[r][listOfAttributes[c]]["S"] +'</td>';
    }
    table+= '</tr>'
}

I get an error for the line:

table +='<td> <a onclick="downloadFile(dataItems[r])" href="#">' + dataItems[r]['FileName']['S'] +'</a></td>';

It seems that JS can't resolve the variable 'dataItems' inside the -tag:

<a onclick="downloadFile(dataItems[r])" href="#">.

However, later in the same line, JS resolves successfully the same name for the part:

+ dataItems[r]['FileName']['S'] +

What do you think can be the problem? How can I make dataItems be resolved inside the -tag ?

Could you please share the error message? Also please add any frameworks and other technologies you are using to the questions tags — splay
– splay, Commented Oct 2, 2016 at 9:33

Maximilian Peters · Accepted Answer · 2016-10-02 09:33:52Z

3

Your variable is inside a string. Try changing the code to:

table +='<td> <a onclick="' + downloadFile(dataItems[r]) + '" href="#">' + dataItems[r]['FileName']['S'] +'</a></td>';**

answered Oct 2, 2016 at 9:33

Maximilian Peters

31.9k12 gold badges95 silver badges102 bronze badges

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

Comments

Abdul Mateen Mohammed · Accepted Answer · 2016-10-02 09:49:50Z

0

As you're placing a string inside the element's attribute it is not recognized as a JavaScript code or a JavaScript function so place the JavaScript function itself.

So you can do, var anchor = '<a href="#" onclick="' + your_func_here + '"></a>';

A sample example illustrating the problem, in this example if you write the function name as a string in the onclick property the function won't be called.

var container = document.getElementById('container');
var element = document.createElement('a');
element.href = '#';
element.text = 'Fire!';
element.onclick = fire; // this invokes the fire function
// element.onclick = 'fire'; // this won't invoke the fire function
container.appendChild(element);

function fire() {
  console.log('fired');
}

<div id="container">
</div>

edited Oct 2, 2016 at 9:49

answered Oct 2, 2016 at 9:44

Abdul Mateen Mohammed

1,8841 gold badge13 silver badges21 bronze badges

Comments

gurvinder372 · Accepted Answer · 2016-10-02 09:33:53Z

0

In this line

<a onclick="downloadFile(dataItems[r])" href="#">

unless dataItems is a global variable, it won't be available to the environment which will make this call downloadFile(dataItems[r]), since onclick event will be invoked in a global scope.

You need to bind the event less intrusively this way

//you need to update the selector as per your markup
document.querySelector ( "tr td a" ).addEventListener( "click", function(){
  downloadFile(dataItems[r]);
})

answered Oct 2, 2016 at 9:33

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

2 Comments

CrazySynthax Over a year ago

But if you look at my code, you'll see that I have many <tr><td>...</td></tr>. How will the code "know" which one the onclick should be added to?

gurvinder372 Over a year ago

This is precisely why I mentioned that you need to update the selector based on your markup.

Collectives™ on Stack Overflow

JavaScript: variable name unresolved

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related