[英]onclick modifier function referencing variable instead of using variable value (JavaScript)
(Edit: Someone asked for where trueName
is defined in relation to the loop, so I included it in the code sample. relPath
is defined in the function parameter) (编辑:有人问在哪里定义了与循环相关的trueName
,所以我将它包含在代码示例中relPath
在函数参数中定义)
I have a forEach loop that is meant to clone a template and set an onclick function to open a link for each clone.我有一个 forEach 循环,用于克隆模板并设置 onclick 函数以打开每个克隆的链接。 From the code sample below, you can see that I have 2 variables - relPath
and trueName
- that are supposed to form part of the parameter passed to the function:从下面的代码示例中,您可以看到我有 2 个变量relPath
和trueName
它们应该构成传递给函数的参数的一部分:
function showDirectoryItems(relPath, data){
Object.keys(data).forEach((item)=>{
nameSplit = item.split(">>");
trueName = nameSplit[0];
...
if (data[item]=="file"){
clone.getElementById("name").onclick = function() {downloadFile(relPath+'/'+trueName)};
...
So in theory, one of the clones would have an onclick function of (for example) downloadFile('files/test1.txt')
, another would have downloadFile('files/test2.mp3')
, etc.因此,理论上,其中一个克隆将具有(例如) downloadFile('files/test1.txt')
的 onclick 功能,另一个将具有downloadFile('files/test2.mp3')
等。
However, when I run the code, the onclick functions in all of the clones seemed to link to the same path of the last item.但是,当我运行代码时,所有克隆中的 onclick 函数似乎都链接到最后一项的相同路径。 I checked the code and realised that the onclick functions used variable references instead of an absolute value (ie, instead of something like 'files'+'/'+'aaa.txt'
, it was relPath+'/'+trueName
):我检查了代码并意识到 onclick 函数使用变量引用而不是绝对值(即,而不是像'files'+'/'+'aaa.txt'
类的东西,它是relPath+'/'+trueName
):
As such, how do I set the onclick function to take in the absolute value of these variables during the forEach loop, instead of a variable reference ?因此,如何设置 onclick 函数以在 forEach 循环期间获取这些变量的绝对值,而不是变量引用?
Managed to fix the problem in the end by changing the line where trueName
is defined:通过更改定义trueName
的行,最终设法解决了问题:
trueName = nameSplit[0]
and adding var
in front of trueName
to declare it as a variable:并在trueName
前面添加var
以将其声明为变量:
var trueName = nameSplit[0]
What I'm guessing is causing the issue, as per this answer to another question, is that because I did not put var
when declaring the variable, the code treated trueName
as a implicit global, thus causing the onclick function to reference the variable name instead of getting the variable's value directly.根据对另一个问题的回答,我猜是因为我在声明变量时没有放var
,所以代码将trueName
视为隐式全局,从而导致 onclick 函数引用变量名称而不是直接获取变量的值。
HTML: HTML:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
JS: JS:
document.querySelectorAll("div").forEach((e) => {
name123 = e.innerText;
e.onclick = function () {
alert(name123);
};
});
Move the [nameSplit, trueName] to onClick scope.将 [nameSplit, trueName] 移动到 onClick 范围。
document.querySelectorAll("div").forEach((e) => {
e.onclick = function () {
name123 = e.innerText;
alert(name123);
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.