我想传递一个参数(即字符串)到Onclick函数。
目前,我是这样做的:
'<input type="button" onClick="gotoNode(' + result.name + ')" />'
例如,result.name = string "Add"。
当我点击这个按钮时,我有一个错误,说“Add is not defined”。由于这个函数调用可以很好地处理数值形参,所以我假设它与字符串中的符号“”有关。
我该如何解决这个问题?
我想传递一个参数(即字符串)到Onclick函数。
目前,我是这样做的:
'<input type="button" onClick="gotoNode(' + result.name + ')" />'
例如,result.name = string "Add"。
当我点击这个按钮时,我有一个错误,说“Add is not defined”。由于这个函数调用可以很好地处理数值形参,所以我假设它与字符串中的符号“”有关。
我该如何解决这个问题?
当前回答
要传递多个参数,可以通过将字符串与ASCII值连接来强制转换。比如,对于单引号,我们可以使用'
var str = "'" + str + "'";
可以传递给onclick()事件的相同参数。在大多数情况下,它适用于所有浏览器。
其他回答
如果用于生成一组具有不同处理程序参数的按钮。
JavaScript闭包
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”。
我猜,您正在使用JavaScript本身创建一个按钮。代码中的错误在于,它会以这种形式呈现
<input type="button" onClick="gotoNode(add)" />'
在当前状态下,add将被视为与变量或函数调用类似的标识符。你应该这样转义这个值
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
看起来像是从字符串构建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);
请注意,如果这是一个循环或其他东西,结果将在事件触发之前发生变化,您需要创建一个额外的作用域气泡来掩盖变化的变量。
如果你的按钮是动态生成的:
你可以将字符串参数传递给JavaScript函数,如下所示:
我传递了三个参数,第三个是字符串参数。
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);
}
<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');
}