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


225

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

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

例如,result.name等于字符串“ Add”。当我单击此按钮时,出现一个错误,提示未定义添加。由于此函数调用可以完美地与数字参数一起使用,因此我认为它与字符串中的符号“”有关。以前有人遇到过这个问题吗?


1
在这种情况下,最好不使用内联事件处理程序可能会更好。
菲利克斯·克林

1
您的问题是由于变量未正确转义。检查我的答案
Starx'3

Answers:


351

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


7
符号的这种格式确实有效,因此非常感谢
JasperTack 2012年

2
嗨@david ..我有一个疑问...我想在该onclick中传递多个参数。你能对我有用吗?
VIVEK-MDU

2
@david,感谢它解决了我的字符串参数问题,但现在我必须通过(字符串,布尔值)。为此该怎么做?
Zaveed Abbasi 2014年

1
谢谢,它真的帮助了我:)
Hitesh

2
@大卫:你能告诉点点,为什么我们需要添加引用周围
亚太区首席技术官Matt

34

对我来说,在onClick中使用字符串转义会引起一些关注,随着参数数量的增加,维护起来会变得很麻烦。

以下方法将具有一个跃点-单击时-将控件带到处理程序方法和基于事件对象的处理程序方法中,可以推断出click事件和相应的对象。

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

<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 ....)。


2
我很惊讶这没有得到更多支持,因为它是将参数传递给事件处理程序的更干净的方法。
蒂姆·奥布莱恩

这不起作用,invoke当您单击按钮时不会调用
tanguy_k,

很好的解决方案!如果您需要传递数组或对象,只需JSON.stringify(obj)在HTML和JSON.parse(event.target.getAttribute('data-arg'))JavaScript层中使用
leonheess

@SairamKrish在我的情况下,如果我单击设置为显示ID的按钮,则屏幕截图:snag.gy/7bzEWN.jpg 代码:pastiebin.com/5d35674e2fc31
Gem

这可能有效,但是它是一种抽象的,非典型的实现,对于需要维护此特性的其他开发人员而言,这很难遵循。
斯潘塞·沙利文

24

我建议甚至不要使用HTML onclick处理程序,而应使用更常见的方法,例如document.getElementById

HTML:

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

JavaScript:

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

onclick不是函数,而是必须将函数分配给以下属性:....onclick = function() {...};
Felix Kling 2012年

@FelixKling谢谢您,我的头仍处于jQuery模式。
kevinji'3

4
您假设将只有这些输入之一。
Madbreaks 2012年

OP的问题暗示只有一个输入。
kevinji'3

我认为该选项对我不起作用,因为我通过搜索操作生成了多个按钮。我可以通过使用计数器添加到ID来解决此问题,但我想使其简单并保持内联
JasperTack 2012年

21

我猜,您正在使用JavaScript本身创建按钮。因此,您代码中的错误是它将以这种形式呈现

<input type="button" onClick="gotoNode(add)" />'

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

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

16

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

<!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>

8

试试这个..

HTML:

<button id="a1" type="button" onclick="return a1_onclick('a1')">a1</button> 

JavaScript:

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

注意:请确保在html代码中的''符号之间发送自变量,例如('a1')


谢谢!!几个小时一直在寻找这个问题
cweitat

有人帮忙吗?就我而言,如果我单击我已设置为显示ID的按钮,则屏幕截图:snag.gy/7bzEWN.jpg 代码:pastiebin.com/5d35674e2fc31
Gem

6

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

尝试:

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

有关更多信息,请访问MDNStackoverflow

受Chrome,Edge,Firefox(Gecko),Opera,Safari支持,但不支持Internet Explorer。


6

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

您可以将字符串参数传递给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);
}

1
尼斯,干净,简单。谢谢

5

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

小提琴参考。

Javascript:

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

HTML:

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

尝试此解决方案时出现错误:在这种情况下,“ + result.name +”部分用作字符串
JasperTack 2012年

什么是“结果”对象?它是在JS中声明的全局变量吗?例如... var结果= {name:'javascript'};
Sandeep GB 2012年

结果包含从面颊库的纪录:这是一个JSON结构与属性的名称,类型,...
JasperTack

Jaspack,我已经更新了答案。现在对您有用吗?
Sandeep GB 2012年

谢谢您提供的示例,但这在我的情况下不起作用:结果变量不是全局变量,而是过程中的变量。因此,当我用result.name调用函数时,结果是未知的
JasperTack 2012年

4

多个参数:

   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>'
    );

2

要传递多个参数,您可以通过将字符串与ASCII值连接起来来强制转换字符串,例如,对于单引号,我们可以使用'

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

2

这是我正在使用的Jquery解决方案。

jQuery的

$("#slideshow button").click(function(){
    var val = $(this).val();
    console.log(val);
});

的HTML

<div id="slideshow">
    <img src="image1.jpg">
    <button class="left" value="back">&#10094;</button>
    <button class="right" value="next">&#10095;</button>
</div>


0

为了传递多个参数,您可以通过将字符串与ASCII值连接来强制转换字符串,例如,对于单引号,我们可以使用 &#39;

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

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


0

是否用于生成具有不同处理程序参数的一组按钮。 https://www.w3schools.com/js/js_function_closures.asp

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”的最后一个值


0

如果您使用的是ASP,则可以使用javascript:

HTML:

<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"

Javascript:

function EditSelectedOptionName(id, name) {
        console.log(id);
        console.log(name);
 }

0

如果您正在动态添加按钮或链接并面临问题,那么这可能会有所帮助。我这样解决了。

var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');

我是HTML,JQuery和JS的新手。所以可能我的代码没有得到优化或语法,但是它对我有用。



0

你可以用这个

'<input id="test" type="button" value="' + result.name + '" />'

$(document)..on('click', "#test", function () {
        alert($(this).val());
});

它对我的工作


-1
    <style type="text/css">
        #userprofile{
              display: inline-block;
              padding: 15px 25px;
              font-size: 24px;
              cursor: pointer;
              text-align: center;
              text-decoration: none;
              outline: none;
              color: #fff;
              background-color: #4CAF50; //#c32836
              border: none;
              border-radius: 15px;
              box-shadow: 0 9px #999;
              width: 200px;
              margin-bottom: 15px;

        }
        #userprofile:hover {
            background-color: #3e8e41
        }
        #userprofile:active {
              background-color: #3e8e41;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
        }
        #array {
                border-radius: 15px 50px;
                background: #4a21ad;
                padding: 20px;
                width: 200px;
                height: 900px;
                overflow-y: auto;
            }

    </style>
if(data[i].socketid!=""){
$("#array").append("<button type='button'  id='userprofile' class='green_button' name="+data[i]._id+" onClick='chatopen(name)'>"+data[i].username+"</button></br>");                    
                }else{
                    console.log('null socketid  >>', $("#userprofile").css('background-color')); 
                    //$("#userprofile").css('background-color','#c32836 ! important');


$("#array").append("<button type='button'  id='userprofile' class='red_button' name="+data[i]._id+" onClick='chatopen(name)'>"+data[i].username+"</button></br>");  
                $(".red_button").css('background-color','#c32836');             
                }

请解释您的代码,这个答案本身是没有用的
Phil Hudson

-1

以下对我很有效,

<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>

1
OP并没有询问恒定值。这不能回答问题。
RubioRic

-1

您可以在按钮的onclick方法中使用以下代码:

<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.