2012-03-10 29 views
153

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

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

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

+1

这可能是在这种情况下,最好根本不使用内联事件处理程序。 – 2012-03-10 02:09:43

+1

你的问题是由于变量没有正确转义。检查[我的答案](http://stackoverflow.com/a/9643494/295264) – Starx 2012-03-10 02:43:50

+1

我有同样的问题 – Hitesh 2014-09-23 13:14:44

回答

232

它看起来就像你正在构建从字符串的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将事件触发之前发生变化,你需要创建一个额外的范围泡影着变化的变量。

+4

这种符号的格式化工作,所以非常感谢 – Consec 2012-03-10 02:46:54

+2

Hi @ david ..我有一个疑问.. 。我想通过多个参数在onclick ..如何可能?你能对我有用吗..? – 2013-08-22 13:25:46

+2

@ david,谢谢它解决了我的字符串参数问题,但现在我必须通过(字符串,布尔值)。该怎么做? – 2014-01-21 09:17:55

4

编辑: 如果需求是引用在HTML代码中的全局对象(JS),你可以试试这个。 [不使用任何引号(”或“)周围的变量]

Fiddle参考

的Javascript:

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

HTML:

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

当我尝试这种解决方案时,我得到一个错误:部分“+ result.name +”被用作字符串中这种情况下 – Consec 2012-03-10 02:28:15

+0

什么是“结果”对象?它是在JS中声明的全局变量吗?像... var result = {name:'javascript'}; – 2012-03-10 02:30:39

+0

结果包含jowl库中的一条记录:这是一个json结构,其中包含属性名称,类型,... – Consec 2012-03-10 02:36:06

20

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

HTML:

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

的JavaScript:

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

'onclick'不是一个函数,它是一个属性,你必须指定一个函数:'.... onclick = function(){... };' – 2012-03-10 02:16:56

+0

@FelixKling非常感谢,我的头仍然处于jQuery模式。 – mc10 2012-03-10 02:18:13

+1

你假设只有这些输入中的一个。 – Madbreaks 2012-03-10 02:18:13

15

我猜测,你正在使用JavaScript本身创建一个按钮。因此,错误在你的代码,它会以这种形式

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

在这个当前状态,add将被视为像变量或函数调用的标识符渲染。你应该逃离这样的价值

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

试试这个..

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')之间的' 发送参数的

+0

谢谢!!一直在寻找这个几个小时的概率 – cweitat 2018-01-26 07:31:06

1

你可以传递引用或字符串值只需将函数放入双击逗号“”下面的快照asp即可

enter image description here

10

这是一个很好的整洁的方式来发送价值或对象。

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

还您在串

尝试使用重音符号(`):

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

的更多信息,请访问MDNStackoverflow

通过浏览器,边缘,火狐(壁虎),Opera,Safari支持,但不支持Internet Explorer。

13

对于我在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 
    }) 
    } 

这里的优点是,根据需要,我们可以有许多参数(在上面的例子中,数据ARG1,数据ARG2 ....)。

+1

我很惊讶这没有得到更多upvotes,因为它是传递参数到事件处理程序的更干净的方法。 – 2016-09-30 16:47:53

+0

谢谢@ TimO'Brien – 2016-10-06 15:03:56

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

传递多个参数,你可以通过与ASCII值相连来投的串像,单引号,我们可以使用&#39;

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

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

0
<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');    
       } 
1

传递多个参数,你可以通过与ASCII值相连来投的串像,单引号,我们可以使用'

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

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

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