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

Question

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

目前，我这样做：

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

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

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

我该如何解决这个问题？

原文由 JasperTack 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 会在事件触发之前发生变化，您需要创建一个额外的范围气泡来隐藏变化的变量。

原文由 david 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

关于在 onClick 中使用字符串转义，我有几个问题，随着参数数量的增加，维护起来会很麻烦。

下面的做法会有一个跳转——On click——把控件交给一个handler方法，handler方法根据事件对象，可以推导出点击事件和对应的对象。

它还提供了一种更简洁的方法来添加更多参数并具有更大的灵活性。

 <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 等）。

原文由 Sairam Krish 发布，翻译遵循 CC BY-SA 4.0 许可协议