如何定义包含变量的onclick函数？Javascript_Javascript_Buttonclick

如何定义包含变量的onclick函数？Javascript

javascript

如何定义包含变量的onclick函数？Javascript,javascript,buttonclick,Javascript,Buttonclick,我是web开发方面的新手，我尝试在javascript函数中创建多个按钮，并在for循环中定义它们的onclick函数我想要的是：单击按钮时，我希望恢复与此按钮关联的值我所拥有的：当我单击任何按钮时，我正在恢复与最后一个按钮关联的值我已经举了一个简单的例子来说明我要做的事情： HTML: <html> <body> <div id="container"> </div> <script

我是web开发方面的新手，我尝试在javascript函数中创建多个按钮，并在for循环中定义它们的onclick函数

我想要的是：单击按钮时，我希望恢复与此按钮关联的值

我所拥有的：当我单击任何按钮时，我正在恢复与最后一个按钮关联的值

我已经举了一个简单的例子来说明我要做的事情：

HTML:

<html>
  <body>
    <div id="container">
    </div>
    <script src="script.js" charset="utf-8"></script>
  </body>
</html>

JS:

我不知道是否有最好的方法来为JS文件中创建的按钮声明.onclick函数，或者是其他方法

我希望你能帮助我！提前谢谢大家,，真诚地

Valentin在js中的索引从0开始

const data = [1, 2, 3, 4, 5];

for (let i = 0; i < data.length; i++) {
  const root = document.createElement('button');
  root.setAttribute("class", "exerciceBox");
  root.textContent = i;
  root.onclick = function() {
    console.log(i++); // this prints out i (index) + 1
  }
  document.getElementById("container").append(root);
}

在js中，索引从0开始

const data = [1, 2, 3, 4, 5];

for (let i = 0; i < data.length; i++) {
  const root = document.createElement('button');
  root.setAttribute("class", "exerciceBox");
  root.textContent = i;
  root.onclick = function() {
    console.log(i++); // this prints out i (index) + 1
  }
  document.getElementById("container").append(root);
}

问题在于var语句，它存在范围问题。var语句声明一个函数作用域或全局作用域变量。要解决此问题，请声明变量i by let语句以在for循环中维护作用域

一个可能的解决方案如下

常量数据=[1,2,3,4,5]；对于let i=0；i 一个可能的解决方案如下

常量数据=[1,2,3,4,5]；对于let i=0；i您总是会得到i的最后一个值，因为for会一直递增到循环结束，然后，当您单击按钮时，您会看到递增的值。试试这个：

for (let i = 0; i < data.length; i++) {
    const root = document.createElement('button');
    root.setAttribute("class", "exerciceBox");
    root.textContent = i;
    let thisButtonI = i; //Make a copy of the actual value of i
    root.onclick = function() {
        console.log(thisButtonI); //use the copy, not the original i
    }
    document.getElementById("container").append(root);
}

您总是会得到i的最后一个值，因为for会一直递增到循环结束，然后，当您单击按钮时，您会看到递增的值。试试这个：

for (let i = 0; i < data.length; i++) {
    const root = document.createElement('button');
    root.setAttribute("class", "exerciceBox");
    root.textContent = i;
    let thisButtonI = i; //Make a copy of the actual value of i
    root.onclick = function() {
        console.log(thisButtonI); //use the copy, not the original i
    }
    document.getElementById("container").append(root);
}

您需要为按钮添加一个值属性。以下是如何操作：

const data = [1, 2, 3, 4, 5];
for (i = 0;i < data.length;i++) {
  const root = document.createElement('button');
  root.setAttribute("class", "exerciceBox");
  // set the value of your button to i
  root.setAttribute("value", i);
  root.textContent = i;
  root.onclick = function() {
  // get the value using 'this' 
  console.log(this.value);
  }
  document.getElementById("container").append(root);
}

您需要为按钮添加一个值属性。以下是如何操作：

const data = [1, 2, 3, 4, 5];
for (i = 0;i < data.length;i++) {
  const root = document.createElement('button');
  root.setAttribute("class", "exerciceBox");
  // set the value of your button to i
  root.setAttribute("value", i);
  root.textContent = i;
  root.onclick = function() {
  // get the value using 'this' 
  console.log(this.value);
  }
  document.getElementById("container").append(root);
}

不要在循环内创建函数。它很容易出现错误，因为一旦循环退出，函数可能会被覆盖，并附加最后一个循环值。不要在循环中修改DOM——这样会导致混乱、不必要的重新绘制和重绘对于如何在给定数组的情况下创建一系列元素并将它们插入DOM，这里有一个更好的解决方案

创建按钮EL_数据项的蓝图，并分配必要的属性和事件处理程序用于将数据数组缩减为DocumentFragment集合。 Use及其.append方法填充DocumentFragment后，在需要的地方插入按钮-一次插入所有按钮。 //助手 const ELNew=sel，attr=>Object.assigndocument.createElementsel，attr |{}； const EL=sel，EL=>EL | | document.querySelectorsel； //您的数据数组常量数据=[1,2,3,4,5]； //按钮蓝图 const EL_dataItem=item=>ELNewbutton{ 类型：按钮，类名：exerciceBox，//cice？。。 textContent:item，单击{console.logitem；}， }; //创建附加到DocumentFragment中的所有按钮 const DF_items=data.reduceDF，item=>{ DF.appendEL_数据项；返回DF； }，新文献片段； //追加DocumentFragment一次。 ELcontainer.APPENDF_项目；不要在循环内创建函数。它很容易出现错误，因为一旦循环退出，函数可能会被覆盖，并附加最后一个循环值。不要在循环中修改DOM——这样会导致混乱、不必要的重新绘制和重绘对于如何在给定数组的情况下创建一系列元素并将它们插入DOM，这里有一个更好的解决方案