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



js传参 (10)

我想传递一个参数(即一个字符串)到一个Onclick函数。 目前,我这样做:

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

例如result.name等于字符串“Add”。 当我点击这个按钮时,我有一个错误,说没有定义添加。 由于这个函数调用对于一个数字参数来说是完美的,我认为它与字符串中的符号“”有关。 有没有人有过这个问题?

https://code.i-harness.com


为了传递多个参数,你可以通过连接字符串来连接字符串,就像单引号一样,我们可以使用&#39;

var str= "&#39;"+ str+ "&#39;";

您可以将相同的参数传递给onclick()事件。在大多数情况下,它适用于每个浏览器。


以下对我很好,

<html>
<head>
    <title>HTML Form</title>
</head>
<body>
    <form>
        <input type="button" value="ON" onclick="msg('ON')">
        <input type="button" value="OFF" onclick="msg('OFF')">
    </form>
    <script>
        function msg(x){
            alert(x);
        }
    </script>
</body>
</html>

你可以传递refrence或字符串值,只需将函数放在快照下面的doube逗号“”中


关于在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 args as needed...
    window[nameOfFunction](arg1) 
    //hope function is in window. 
    //Else the respective object need to be used 
    })
  }

这样做的好处是我们可以根据需要拥有尽可能多的参数(在上面的例子中,data-arg1,data-arg2 ....)。


它看起来像你从字符串构建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将在事件触发前发生变化,并且您需要创建一个额外的作用域气泡以遮蔽变化的变量。


对于传递多个参数,您可以通过将字符串与ASCII值连接来投射字符串,对于单引号,我们可以使用'

var str= "&#39;"+ str+ "&#39;";

您可以在JavaScript文件中使用此代码添加按钮:

<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>

我建议不要使用HTML onclick处理程序,并使用更常见的东西,如document.getElementById

HTML:

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

JavaScript的:

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

编辑:如果需要在您的HTML代码中引用全局对象(js),则可以尝试此操作。 [不要在变量周围使用任何引号('或')]

Fiddle参考。

使用Javascript:

var result = {name: 'hello'};
function gotoNode(name) {
    alert(name);
}

HTML:

<input value="Hello" type="button" onClick="gotoNode(result.name)" />​

这是发送价值或对象的好方法。

<!DOCTYPE html>
<html>
<body>
<h1  onclick="test('wow',this)">Click on this text!</h1>
<script>
var test =function(value,object){  
object.innerHTML=value;
};     
</script>
</body>
</html>




html