使用绑定

Question

假设我有以下代码：

d <- data.frame(x = 1:5,y = letters[1:5],z = c(NA,1:4))
> d$x[3] <- 9998
> d
     x y  z
1    1 a NA
2    2 b  1
3 9998 c  2
4    4 d  3
5    5 e  4
> d[d == 9998] <- NA
> d
   x y  z
1  1 a NA
2  2 b  1
3 NA c  2
4  4 d  3
5  5 e  4

function addValue(x){

    var button = document.createElement( "input" );
    button.setAttribute("type", "submit");
    button.setAttribute("src", "images/repeatStageIcon.png");
    button.setAttribute("class", "option-image");
    button.setAttribute("title", "Repeat Current Stage!");

    //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
    button.setAttribute("onclick", "createRepeatStage( x )");

    var p = document.getElementById("myDiv");
    p.appendChild(button);
}

function createRepeatStage( thisX ){
   alert(thisX);
}

addValue(6);

问题：

如何在onclick事件中传递 x 属性，以便在调用方法 createRepeatStage（x）; 时， x 值将以该方法传递？

Answer 1

您可以将处理程序包装在另一个函数中。

button.addEventListener("click", function(event) {
  createRepeatStage(x);
});

x的值将由closure保留。

请注意，我使用的是addEventListener而不是setAttribute。

function addValue(x){

    var button = document.createElement( "input" );
    button.setAttribute("type", "submit");
    button.setAttribute("src", "images/repeatStageIcon.png");
    button.setAttribute("class", "option-image");
    button.setAttribute("title", "Repeat Current Stage!");

    //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
    button.addEventListener("click", function(event) {
      createRepeatStage(x);
    });

    var p = document.getElementById("myDiv");
    p.appendChild(button);
}

function createRepeatStage( thisX ){
   alert(thisX);
}

addValue(6);

<html>
  <body>
     <div id="myDiv"></div>
  </body>
</html>

使用绑定

如果出于某种原因而反对将处理程序包装在函数中，则可以利用bind。

function addValue(x){
    var button = document.createElement( "input" );
    button.setAttribute("type", "submit");
    button.setAttribute("src", "images/repeatStageIcon.png");
    button.setAttribute("class", "option-image");
    button.setAttribute("title", "Repeat Current Stage!");

    //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
    button.addEventListener("click", createRepeatStage.bind(null, x));

    var p = document.getElementById("myDiv");
    p.appendChild(button);
}

function createRepeatStage( thisX ){
   alert(thisX);
}

addValue(6);

<html>
  <body>
     <div id="myDiv"></div>
  </body>
</html>

Answer 2

实际上，您的页面中有两处需要解决。

由于页面上没有myDiv元素，因此无法在页面加载之前评估addValue函数。页面加载后执行代码的标准方法是使用onLoad元素中的body属性。那就是：

    <body onload="addValue(6)">
        <h1>Hola</h1>

        <div id="myDiv"></div>
    </body>

如何向新按钮指示“ onclick”处理程序。您只需分配按钮的onclick属性即可：

            function addValue(x){

                var button = document.createElement( "input" );
                button.setAttribute("type", "submit");
                button.setAttribute("class", "option-image");
                button.setAttribute("title", "Repeat Current Stage!");

                //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
                button.onclick = () => createRepeatStage( x );

                var p = document.getElementById("myDiv");
                p.appendChild(button);
            }

请注意，您可以传递箭头功能，它是一种压缩形式...尽管它不能（确实）在较旧的浏览器上运行。为了确保您的代码到处运行，可以使用“传统”函数语法

            function addValue(x){

                var button = document.createElement( "input" );
                button.setAttribute("type", "submit");
                button.setAttribute("class", "option-image");
                button.setAttribute("title", "Repeat Current Stage!");

                //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
                button.onclick = function() { createRepeatStage( x ) };

                var p = document.getElementById("myDiv");
                p.appendChild(button);
            }

希望有帮助-卡洛斯（Carlos）

PS：可能其他按钮设置可以/应该由直接属性分配代替-Carlos

如何使用函数属性作为onclick事件（输入元素）的属性？

2 个答案:

使用绑定