0
232
Vistasfunción de modificador onclick que hace referencia a la variable en lugar de usar el valor de la variable (JavaScript)
(Editar: alguien preguntó dónde se define trueName en relación con el ciclo, así que lo incluí en el ejemplo de código. relPath se define en el parámetro de función)
Tengo un bucle forEach que está destinado a clonar una plantilla y configurar una función onclick para abrir un enlace para cada clon. En el ejemplo de código a continuación, puede ver que tengo 2 variables, relPath y trueName , que se supone que forman parte del parámetro pasado a la función:
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)}; ... Entonces, en teoría, uno de los clones tendría una función onclick de (por ejemplo) downloadFile('files/test1.txt') , otro tendría downloadFile('files/test2.mp3') , etc.
Sin embargo, cuando ejecuto el código, las funciones onclick en todos los clones parecían vincularse a la misma ruta del último elemento. Revisé el código y me di cuenta de que las funciones onclick usaban referencias variables en lugar de un valor absoluto (es decir, en lugar de algo como 'files'+'/'+'aaa.txt' , era relPath+'/'+trueName ):
Como tal, ¿cómo configuro la función onclick para tomar el valor absoluto de estas variables durante el bucle forEach, en lugar de una referencia de variable ?
1 Respuestas
Responde la pregunta0
Oye, tu pregunta puede ser así:
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:
document.querySelectorAll("div").forEach((e) => { name123 = e.innerText; e.onclick = function () { alert(name123); }; });Haga clic en cualquiera de ellos para mostrar 9, el último elemento;
Solución:
Mueva [nameSplit, trueName] al ámbito onClick.
En mi ejemplo como:
document.querySelectorAll("div").forEach((e) => { e.onclick = function () { name123 = e.innerText; alert(name123); }; }); 