javascript:将对象作为参数传递给字符串中的onclick函数

cnjp1d6j  于 2023-01-16  发布在  Java
关注(0)|答案(5)|浏览(148)

我想把一个对象作为参数传递给一个字符串中的Onclick函数,如下所示:

function myfunction(obj,parentobj){ 
   var o=document.createElement("div");
   o.innerHTML='<input type="button" onclick="somelistener(' + obj + ')" />';
   parentobj.appendChild(o.firstChild);
}

显然,这行不通。有人知道吗?太好了!
@Austin建议的更完整版本

<!DOCTYPE html>
<html>
<body>
<style type="text/css">

</style>
<p id="test">test</p>
<p id="objectid"></p>

<script>
function test(s){
    document.getElementById("test").innerHTML+=s;
}

function somelistener(obj){
    test(obj.id);
}

function myfunction(obj,parentobj){ 
    var o=document.createElement("div");
    o.innerHTML='<input type="button" onclick="somelistener(' + obj + ')" />';

    o.onclick = function () {
        someListener(obj)
    }
parentobj.appendChild(o.firstChild);
}

myfunction(document.getElementById("objectid"),document.getElementById("test"));

</script>

</body>
</html>
w8ntj3qf

w8ntj3qf1#

上面的例子不起作用,因为obj到文本的输出是[Object object],所以实际上,您调用的是someListener([Object object])
o中有元素的示例时,使用javascript绑定到它的click:

function myfunction(obj,parentobj){ 
    var o=document.createElement("div");
    o.innerHTML='<input type="button" />';

    o.onClick = function () {
        someListener(obj)
    }

    parentobj.appendChild(o.firstChild);
}

我在这里为你创造了一把实用的小提琴:JSFiddle

vvppvyoh

vvppvyoh2#

function myfunction(obj,parentobj){ 
        var o=document.createElement("div");
         o.innerHTML="<input type='button' onclick='somelistener("+JSON.stringify(obj)+")'/>"; 
                                  parentobj.appendChild(o.firstChild);
            } 
    // my similar problem, function a was called in a jsonArray loop in the dataTable initiation
    function a(data, type, obj) {
                         var str = "";
                         str += "<span class='button-group'>";
                         str +="<a onclick='chooseData1("+JSON.stringify(obj)+")'>[选择]</a>";
                         str += "</span>";
                         return str;
                                            }
function chooseData1(data){
                        console.log(data);
                  }
h43kikqp

h43kikqp3#

这是一个老问题,我不太理解它的答案,但最简单的解决方案是组合函数encodeURIComponentJSON.stringify,也就是说,将对象字符串化,然后对那些特殊字符进行转义,然后在函数内部反向执行该过程

var obj = {a: 'hey there', b: 1}

document.getElementById('mydiv').innerHTML =
  `<button onclick="myFunctions('${encodeURIComponent(JSON.stringify(obj))}')">Click me</button>`

function myFunctions(obj) {
  obj = JSON.parse(decodeURIComponent(obj))
  console.log(obj)
}
<div id="mydiv"></div>
gcuhipw9

gcuhipw94#

只需使用JSON.strigify(obj)将对象字符串化,并将其作为参数传递给onclick函数,它将被直接解析并作为Object接收到函数中。

function myfunction(obj,parentobj){ 
   var o=document.createElement("div");
   var stringifiedObj = JSON.stringfy(obj)

   o.innerHTML='<input type="button" onclick=`somelistener(${stringifiedObj})` />';
   parentobj.appendChild(o);
}

function somelistener(obj){
   console.log(typeof obj) //Object
}
ffdz8vbo

ffdz8vbo5#

就像这样传过去:

o.innerHTML='<input type="button" onclick="somelistener(this)" />';

相关问题