CODEWITHSUNDEEP
javascriptargument-passing
Elizabeth
Elizabeth

Reputation: 541

javascript: pass an object as the argument to a onclick function inside string

I would like to pass an object as parameter to an Onclick function inside a string. Something like follwing:

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

Obviously, this doesn't work. Anyone has any idea? THX!

A more complete version, as suggested by @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>

Upvotes: 34

Views: 92192

Answers (5)

HaRish. P
HaRish. P

Reputation: 31

Just stringify the object using JSON.stringify(obj) and pass into the onclick function as parameter and it will be parsed directly and received in the function as Object.

function myfunction(obj,parentobj){ 
   var o=document.createElement("div");
   // stringify the object
   var stringifiedObj = JSON.stringify(obj)

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

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

Upvotes: 3

Jo&#227;o Pimentel Ferreira
Jo&#227;o Pimentel Ferreira

Reputation: 16292

Old question whose answers I didn't quite understand, but the simplest solution is to combine the functions encodeURIComponent and JSON.stringify, that is, you stringify the object and then escape those special characters, and then reverse the process inside the function

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

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

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

Upvotes: 18

Nikikiy SCC
Nikikiy SCC

Reputation: 161

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

Upvotes: 10

Jaskaran Singh
Jaskaran Singh

Reputation: 2568

Just do pass it like this :

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

Upvotes: -10

Austin
Austin

Reputation: 6034

The above example does not work because the output of obj to text is [Object object], so essentially, you are calling someListener([Object object]).

While you have the instance of the element in o, bind to it's click using javascript:

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

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

    parentobj.appendChild(o.firstChild);
}

I have created a working fiddle for you here: JSFiddle

Upvotes: 27

Related Questions