在 onclick 函数中传递字符串参数

javascript html

2022-08-30 00:12:36

我想将一个参数（即字符串）传递给Onclick函数。

目前，我这样做：

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

例如，result.name 等于字符串“Add”。

当我单击此按钮时，我遇到一个错误，指出“未定义添加”。由于此函数调用与数值参数完美配合，因此我假设它与字符串中的符号“”有关。

如何解决此问题？

答案 1

看起来您正在从字符串构建DOM元素。您只需要在 result.name 周围添加一些引号：

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

不过，您应该使用适当的DOM方法来执行此操作。

var inputElement = document.createElement('input');
inputElement.type = "button"
inputElement.addEventListener('click', function(){
    gotoNode(result.name);
});

document.body.appendChild(inputElement);

请注意，如果这是一个循环或其他内容，则会在事件触发之前更改，并且您需要创建一个额外的范围气泡来隐藏不断变化的变量。result

答案 2

关于在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等）。