我想将参数(即字符串)传递给Onclick函数。
目前,我这样做:
'<input type="button" onClick="gotoNode(' + result.name + ')" />'
例如,result.name等于字符串“ Add”。
当我单击此按钮时,出现错误消息“未定义添加”。由于此函数调用可以完美地与数字参数一起使用,因此我认为它与字符串中的符号“”有关。
我该如何解决这个问题?
看起来您是从字符串构建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中使用字符串转义的问题,我有两个担心,随着参数数量的增加,维护起来会很麻烦。
下面的方法将具有一个跃点-单击时-将控件带到处理程序方法和基于事件对象的处理程序方法,可以推断出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 ....)。
我建议甚至不要使用HTMLonclick
处理程序,而应使用更常见的内容,例如document.getElementById
。
HTML:
<input type="button" id="nodeGoto" />
JavaScript:
document.getElementById("nodeGoto").addEventListener("click", function() {
gotoNode(result.name);
}, false);
我猜,您正在使用JavaScript本身创建按钮。因此,您代码中的错误是,它将以这种形式呈现
<input type="button" onClick="gotoNode(add)" />'
在此当前状态下,add
将被视为类似于变量或函数调用的标识符。你应该这样逃避价值
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
这是一种发送值或对象的好方法。
<!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>
尝试这个..
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')
您也可以在字符串中使用重音符号(`)
尝试:
`<input type="button" onClick="gotoNode('${result.name}')" />`
有关更多信息,请访问MDN和Stackoverflow
受Chrome,Edge,Firefox(Gecko),Opera,Safari支持,但不支持Internet Explorer。
如果您的按钮是动态生成的:
您可以将字符串参数传递给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);
}
如果要求在HTML代码中引用全局对象(JavaScript),则可以尝试这样做。[不要在变量周围使用任何引号('或“)]
小提琴参考。
JavaScript:
var result = {name: 'hello'};
function gotoNode(name) {
alert(name);
}
HTML:
<input value="Hello" type="button" onClick="gotoNode(result.name)" />
多个参数:
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>'
);
要传递多个参数,您可以通过将字符串与ASCII值连接起来来强制转换字符串,例如,对于单引号,我们可以使用'
var str= "'"+ str+ "'";
这是我正在使用的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">❮</button>
<button class="right" value="next">❯</button>
</div>
您可以在快照下面的doube逗号“” asp中放入函数,即可传递引用或字符串值
为了传递多个参数,您可以通过将字符串与ASCII值连接来强制转换字符串,例如,对于单引号,我们可以使用 '
var str= "'"+ str+ "'";
您可以将相同的参数传递给onclick()
事件。在大多数情况下,它适用于每种浏览器。
是否用于生成具有不同处理程序参数的一组按钮。
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”的最后一个值
如果您正在动态添加按钮或链接并面对问题,那么这可能会有所帮助。我通过这种方式解决了。
var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');
我是HTML,JQuery和JS的新手。所以可能我的代码不会得到优化或语法,但是它对我有用。
let task = {....}
<button onclick="myFunction('${task}')">Continue task</button></li>
您可以使用此:
'<input id="test" type="button" value="' + result.name + '" />'
$(document)..on('click', "#test", function () {
alert($(this).val());
});
它为我工作。
如果您需要将变量与'this'关键字一起传递,则以下代码有效:
var status = 'Active';
var anchorHTML = '<a href ="#" onClick = "DisplayActiveStatus(this,\'' + status + '\')">' + data+ '</a>';
在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:
的HTML
<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"
的JavaScript
function EditSelectedOptionName(id, name) {
console.log(id);
console.log(name);
}
<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');
}
以下对我很有效,
<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>
文章标签:html , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!