JavaScriptの：変数名未解決

Question

私は、次のJSコードを書いた：

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>' 
} 

私はラインのエラーを取得する：

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

JSは、変数 'dataItems' を解決することができないようです-tagの内部：

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

しかし、同じ行の後に、JSは同じ部分の同じ名前を正常に解決します。

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

あなたは何が問題になると思いますか？ dataItemをタグ内で解決するにはどうすればよいですか？

Answer 1

をイベントをバインドする必要があります。

だから、あなたが行うことができ、var anchor = '<a href="#" onclick="' + your_func_here + '"></a>';

あなたは関数が呼び出されることはありませんonclickプロパティ内の文字列として関数名を記述する場合は、この例では、問題を例示するサンプル例。

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>

Answer 2

変数は文字列の中にあります。 dataItemsがグローバル変数でない限りのonclickイベントがするので、それは、この呼び出しdownloadFile(dataItems[r])を行います環境に使用することはできません

このライン

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

で

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

Answer 3

：にコードを変更してみてくださいグローバルスコープで呼び出すことができます。

あなたは要素の属性内の文字列を配置しているとして、あなたはそうJavaScript関数自体を置いて、それがJavaScriptコードまたはJavaScript関数として認識されていないこのようにあまり侵入的

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