我想传递一个参数(即字符串)到Onclick函数。

目前,我是这样做的:

'<input type="button" onClick="gotoNode(' + result.name + ')" />'

例如,result.name = string "Add"。

当我点击这个按钮时,我有一个错误,说“Add is not defined”。由于这个函数调用可以很好地处理数值形参,所以我假设它与字符串中的符号“”有关。

我该如何解决这个问题?


当前回答

对于我来说,在onClick中使用字符串转义有几个问题,随着参数数量的增长,它将变得难以维护。

下面的方法将具有一跳-点击-将控件带到处理程序方法,处理程序方法基于事件对象,可以扣除点击事件和相应的对象。

它还提供了一种更清晰的方式来添加更多参数,并具有更大的灵活性。

<button type="button"
        className="btn btn-default"
        onClick="invoke"
        name='gotoNode'
        data-arg1='1234'>GotoNode</button>

在JavaScript层:

  invoke = (event) => {
    let nameOfFunction = this[event.target.name];
    let arg1 = event.target.getAttribute('data-arg1');
    // We can add more arguments as needed...
    window[nameOfFunction](arg1)
    // Hope the function is in the window.
    // Else the respective object need to be used
    })
  }

这里的优点是我们可以根据需要拥有任意多的参数(在上面的例子中,data-arg1, data-arg2等)。

其他回答

没有转义双引号是OP问题的原因。一种易读的方法是使用反引号(MDN)来转义双引号。下面是一个示例解决方案:

my_btn。setAttribute(’onclick’±my_func ($ $ onclick_var1}”、“onclick_var2} ")”);

如果你需要传递一个带有'this'关键字的变量,下面的代码可以工作:

var status = 'Active';
var anchorHTML = '<a href ="#" onClick = "DisplayActiveStatus(this,\'' + status + '\')">' + data+ '</a>';

如果你的按钮是动态生成的:

你可以将字符串参数传递给JavaScript函数,如下所示:

我传递了三个参数,第三个是字符串参数。

var btn ="<input type='button' onclick='RoomIsReadyFunc("+ID+","+RefId+",\""+YourString+"\");'  value='Room is Ready' />";

// Your JavaScript function

function RoomIsReadyFunc(ID, RefId, YourString)
{
  alert(ID);
  alert(RefId);
  alert(YourString);
}

如果用于生成一组具有不同处理程序参数的按钮。

JavaScript闭包

let some_button = document.createElement( "button" );
some_button.type = "button";

some_button.onclick = doWithParam( some_param );

function doWithParam( param ){
    return function(){
        alert( param ); // <-- Your code here
    }
}

如果我们这样做:

some_button.onclick = foo( some_param );
function foo( param ){
    alert( param );
}

然后函数foo在每个更新页面之后启动。

如果我们这样做:

for( let i = 0; i < 10; ++i ){
    var inputElement = document.createElement('input');
    inputElement.type = "button"
    inputElement.addEventListener('click', function(){
        gotoNode(result.name);
    });

 ​   document.body.appendChild(inputElement);​
}

然后,对于循环中创建的所有按钮,参数的最后一个值是“result.name”。

我建议甚至不要使用HTML的onclick处理程序,而使用一些更常见的东西,如document.getElementById。

HTML:

<input type="button" id="nodeGoto" />

JavaScript:

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);