我想将参数（即字符串）传递给 Onclick 函数。
目前，我这样做：
'<input type="button" onClick="gotoNode(' + result.name + ')" />'
例如 result.name 等于字符串“Add”。
当我单击此按钮时，我收到一条错误消息，提示 “未定义添加”。由于此函数调用与数字参数完美配合，我假设它与字符串中的符号“”有关。
我该如何解决这个问题？
【问题讨论】：
标签： javascript html
看起来您正在从字符串构建 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 将在事件触发之前更改，您需要创建一个额外的范围气泡来隐藏更改的变量。
【讨论】：
在 onClick 中使用字符串转义对我来说有几个问题，随着参数数量的增加，维护起来会变得很麻烦。
下面的做法会有一个单跳——On click——把控制权交给一个handler方法和handler方法，基于事件对象，可以扣除点击事件和对应的对象。
它还提供了一种更简洁的方式来添加更多参数并具有更大的灵活性。
<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 arguments as needed...
window[nameOfFunction](arg1)
// Hope the function is in the window.
// Else the respective object need to be used
})
}
这里的优点是我们可以根据需要拥有尽可能多的参数（在上面的示例中，data-arg1、data-arg2 等）。
【讨论】：
invoke
JSON.stringify(obj)，在 JavaScript 层中使用 JSON.parse(event.target.getAttribute('data-arg'))
我建议不要使用 HTML onclick 处理程序，而是使用更常见的东西，例如 document.getElementById。
HTML：
<input type="button" id="nodeGoto" />
JavaScript：
document.getElementById("nodeGoto").addEventListener("click", function() {
gotoNode(result.name);
}, false);
【讨论】：
onclick 不是函数，它是您必须将函数分配给的属性：....onclick = function() {...};
这是一种发送值或对象的好方法。
<!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>
【讨论】：
我猜，您正在使用 JavaScript 本身创建一个按钮。因此，您的代码中的 错误 是，它将以这种形式呈现
<input type="button" onClick="gotoNode(add)" />'
在当前状态下，add 将被视为变量或函数调用的标识符。你应该像这样转义这个值
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
【讨论】：
试试这个...
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')
【讨论】：
如果您的按钮是动态生成的：
您可以将字符串参数传递给 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);
}
【讨论】：
如果需要在您的 HTML 代码中引用全局对象 (JavaScript)，您可以试试这个。 [不要在变量周围使用任何引号（' 或 "）]
Fiddle 参考。
JavaScript：
var result = {name: 'hello'};
function gotoNode(name) {
alert(name);
}
HTML：
<input value="Hello" type="button" onClick="gotoNode(result.name)" />
【讨论】：
您还可以在字符串中使用重音符号 (`)
试试：
`<input type="button" onClick="gotoNode('${result.name}')" />`
欲了解更多信息，请访问MDN和Stack Overflow。
被 Chrome、Edge、Firefox (Gecko)、Opera、Safari 支持，但不支持 Internet Explorer。
【讨论】：
多个参数：
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>'
);
【讨论】：
如果您需要将变量与 'this' 关键字一起传递，则以下代码有效：
var status = 'Active';
var anchorHTML = '<a href ="#" onClick = "DisplayActiveStatus(this,\'' + status + '\')">' + data+ '</a>';
【讨论】：
您可以传递引用或字符串值。只需按照以下快照将函数放在双逗号“”内：
【讨论】：
如果用于生成一组具有不同处理程序参数的按钮。
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”。
【讨论】：
这是我正在使用的 jQuery 解决方案。
$("#slideshow button").click(function(){
var val = $(this).val();
console.log(val);
});
<div id="slideshow">
<img src="image1.jpg">
<button class="left" value="back">❮</button>
<button class="right" value="next">❯</button>
</div>
【讨论】：
let task = {....}
<button onclick="myFunction('${task}')">Continue task</button></li>
【讨论】：
在Razor中，可以动态传递参数：
<a href='javascript:void(0);' onclick='showtotextbox(@Model.UnitNameVMs[i].UnitNameID, "@Model.UnitNameVMs[i].FarName","@Model.UnitNameVMs[i].EngName","@Model.UnitNameVMs[i].Symbol" );'>@Model.UnitNameVMs[i].UnitNameID</a>
【讨论】：
如果您使用的是ASP.NET，则可以使用 JavaScript：
<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"
function EditSelectedOptionName(id, name) {
console.log(id);
console.log(name);
}
【讨论】：
为了传递多个参数，您可以通过将字符串与 ASCII 值连接来转换字符串。比如，对于单引号，我们可以使用&#39;:
var str = "'" + str + "'";
您可以传递给onclick() 事件的相同参数。在大多数情况下，它适用于所有浏览器。
【讨论】：
<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');
}
【讨论】：
如果您要动态添加按钮或链接并遇到问题，那么这可能会有所帮助。我是这样解决的：
var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');
我是 HTML、jQuery 和 JavaScript 的新手。所以也许我的代码不会被优化或语法，但它对我有用。
【讨论】：
<!---- script ---->
<script>
function myFunction(x) {
document.getElementById("demo").style.backgroundColor = x;
}
</script>
<!---- source ---->
<p id="demo" style="width:20px;height:20px;border:1px solid #ccc"></p>
<!---- buttons & function call ---->
<a onClick="myFunction('red')" />RED</a>
<a onClick="myFunction('blue')" />BLUE</a>
<a onClick="myFunction('black')" />BLACK</a>
【讨论】：
不转义双引号是造成 OP 问题的原因。转义双引号的一种可读方法是使用反引号 (MDN)。这是一个示例解决方案：
my_btn.setAttribute('onclick', `my_func("${onclick_var1}", "${onclick_var2}")`);
【讨论】：
你可以用这个：
'<input id="test" type="button" value="' + result.name + '" />'
$(document).on('click', "#test", function () {
alert($(this).val());
});
它对我有用。
【讨论】：
..”（二）是什么意思？
这对我有用：
$(element).attr("onClick", 'functionName(' + "\"" + Object.attribute + "\"" + ')');
只需在 () 中添加 \ 斜杠
【讨论】：
以下对我很有效，
<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>
【讨论】：
您可以在按钮的 onclick 方法中使用此代码：
<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>
【讨论】：