JavaScript onclick 参数

Question

我对 JavaScript 中的 "onclick" 函数有疑问。这里我有一个 div "InfoBar"

<div id="InfoBar"><br>

和两个for循环

 var src = new Array();

 for(var i = 0; i < 2; i++){
    src.push("el1","el2");
 }

 for(var j = 0; j < 2; j++){
    doesFileExist(src[j]);
 }

以及 doesFileExist() 和 klick 函数

function klick(el){
    alert(el)
}

function doesFileExist(urlToFile){
    document.getElementById('InfoBar').innerHTML += '<br>' + '<a id="css" onclick="klick(urlToFile)" href="#" title="'+urlToFile+'">' + "link1 : "  + urlToFile + '</a>';
}

现在我在“a href”中添加了一个“onclick”函数。

如果我点击“link1:el1”，我想显示为警报“urlToFile”字符串。但我不工作。

在 "a href" title="'+urlToFile+'" 中它工作完美，但在 "onclick" 中不起作用。

有人可以帮助我吗？提前致谢。

Answer 1

您正在生成一个属性。它被转换回函数，但作用域被破坏了。

• 不要使用内在事件属性。
• 尽量减少全局变量的使用
• 避免通过将字符串混合在一起来生成 HTML(最好的情况是很难阅读，最坏的情况是会遇到此类问题)

使用标准 DOM:

var container = document.getElementById('InfoBar');
container.innerHTML = ""; // Delete any existing content
container.appendChild(document.createElement('br'));
var anchor = document.createElement('a');
anchor.setAttribute('id', 'css'); // You are running this function is a loop and creating duplicate ids. Use a class instead.
anchor.addEventListener('click', function (event) {
    klick(urlToFile); // the local variable urlToFile is still in scope
});
anchor.setAttribute('href', '#'); // Why are you linking to the top of the page? Use a <button>
anchor.setAttribute('title', urlToFile);
anchor.appendChild(document.createTextNode("link1 : " + urToFile));
container.appendChild(anchor);