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

Jas*_*ack 207 html javascript

我想将参数(即字符串)传递给Onclick函数.目前,我这样做:

'<input type="button" onClick="gotoNode(' + result.name + ')" />'
Run Code Online (Sandbox Code Playgroud)

例如,result.name等于字符串"Add".当我单击此按钮时,出现错误,指出未定义添加.由于这个函数调用与数字参数完美配合,我认为它与字符串中的符号""有关.以前有没有人遇到这个问题?

dav*_*vid 323

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

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
Run Code Online (Sandbox Code Playgroud)

你应该用正确的DOM方法做到这一点.

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

?document.body.appendChild(inputElement);?
Run Code Online (Sandbox Code Playgroud)

请注意,如果这是一个循环或某事,result将在事件触发之前更改,并且您需要创建一个额外的范围气泡来遮蔽变化的变量.

  • 这种符号格式确实有效,非常感谢你 (6认同)
  • 嗨@ david ..我有一个疑问......我想在onc​​lick中传递多个参数.它可能吗?你能对我有用吗? (2认同)
  • @ david,谢谢它解决了我的字符串参数问题,但现在我必须传递(string,boolean).该怎么办? (2认同)
  • @david:你能告诉我们为什么我们需要添加引用 (2认同)

Sai*_*ish 26

对于我来说,关于在onClick中使用字符串转义以及随着参数数量增加而引起的关注,将会变得很麻烦.

以下方法将有一跳 - 单击 - 将控件转换为处理程序方法和处理程序方法,基于事件对象,可以扣除单击事件和相应的对象.

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

<button type="button" 
        className="btn btn-default" 
        onClick="invoke" 
        name='gotoNode' 
        data-arg1='1234'>GotoNode</button>
Run Code Online (Sandbox Code Playgroud)

在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 
    })
  }
Run Code Online (Sandbox Code Playgroud)

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

  • 我很惊讶这没有得到更多支持,因为它是将参数传递给事件处理程序的更干净的方法。 (2认同)
  • 这不起作用,当您单击按钮时不会调用`invoke` (2认同)

kev*_*nji 24

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

HTML:

<input type="button" id="nodeGoto" />
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);
Run Code Online (Sandbox Code Playgroud)

  • 你假设只有其中一个输入. (3认同)
  • `onclick` 不是一个函数,它是一个你必须分配一个函数的属性:`....onclick = function() {...};` (2认同)

Sta*_*arx 20

我猜,你正在使用JavaScript本身创建一个按钮.因此,代码中的错误是,它将以此形式呈现

<input type="button" onClick="gotoNode(add)" />'
Run Code Online (Sandbox Code Playgroud)

在当前状态下,add将被视为变量或函数调用之类的标识符.你应该像这样逃避价值

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
Run Code Online (Sandbox Code Playgroud)


zok*_*mid 14

这是发送价值或对象的一种很好的方式.

<!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>
Run Code Online (Sandbox Code Playgroud)


Maw*_*rdy 7

试试这个..

HTML:

<button id="a1" type="button" onclick="return a1_onclick('a1')">a1</button> 
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

<script language="javascript" type="text/javascript">
    function a1_onclick(id) {
        document.getElementById(id).style.backgroundColor = "#F00";   
    }
</script>
Run Code Online (Sandbox Code Playgroud)

注意:确保在html代码中的''符号('a1')之间发送参数


MJ *_*ili 7

您也可以在字符串中使用重音符号 ( ` )

尝试:

`<input type="button" onClick="gotoNode('${result.name}')" />`
Run Code Online (Sandbox Code Playgroud)

有关更多信息,请访问MDNStack Overflow

受 Chrome、Edge、Firefox (Gecko)、OperaSafari支持,但不支持 Internet Explorer。


San*_*G B 6

如果需要在你的 HTML 代码中引用全局对象(JavaScript),你可以试试这个。[不要在变量周围使用任何引号(' 或 ")]

小提琴参考。

JavaScript:

var result = {name: 'hello'};
function gotoNode(name) {
    alert(name);
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<input value="Hello" type="button" onClick="gotoNode(result.name)" />?
Run Code Online (Sandbox Code Playgroud)


Zah*_*man 5

多参数:

   bounds.extend(marker.position);
        bindInfoWindow(marker, map, infowindow,
     '<b>' + response[i].driver_name + '</b><br>' + 
     '<b>' +moment(response[i].updated_at).fromNow() + '</b>
      <button onclick="myFunction(\''+response[i].id+'\',\''+driversList+'\')">Click   me</button>'
    );
Run Code Online (Sandbox Code Playgroud)


Meh*_*lal 5

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

您可以将字符串参数传递给javascript函数,例如以下代码:

我传递了3个参数,第三个是字符串参数,希望对您有所帮助。

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);
}
Run Code Online (Sandbox Code Playgroud)