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




js传参 (13)

我想传递一个参数（即一个字符串）到一个Onclick函数。 目前，我这样做： 

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

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

Answers

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

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

你也在字符串中使用重音符号（`）

尝试： 

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

有关更多信息，请访问MDN和

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

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

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

对于传递多个参数，您可以通过将字符串与ASCII值连接来投射字符串，对于单引号，我们可以使用' 

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

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

这样做的好处是我们可以根据需要拥有尽可能多的参数（在上面的例子中，data-arg1，data-arg2 ....）。 

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

为了传递多个参数，你可以通过连接字符串来连接字符串，就像单引号一样，我们可以使用&#39; 

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

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

以下对我很好， 

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

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

你可以传递refrence或字符串值，只需将函数放在快照下面的doube逗号“”中 

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

其他一些答案修改了String.prototype （这个答案也是如此），但由于可维护性，我现在建议不要这样做（很难找到函数添加到prototype ，如果其他代码使用相同的代码，可能会导致冲突） name /浏览器将来添加具有相同名称的本机函数。






javascript   html  

javascript html