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

Question

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>

@Austin I am not sure if I understand your answer correct. But as I tried in complete version above, it does not work either. Could you see the problem? — Elizabeth
– Elizabeth, Commented Aug 26, 2012 at 12:38
@scott.korin Thx Scott. But after I changed the capitalization, it still does not work. — Elizabeth
– Elizabeth, Commented Aug 26, 2012 at 12:57
@Austin BTW, even if I change o.onclick to o.firstChild.onclick, that does not work either, if that is potentially a problem. — Elizabeth
– Elizabeth, Commented Aug 26, 2012 at 13:05
Can you be a little more specific? What exactly is not working? — Austin
– Austin, Commented Aug 27, 2012 at 11:29

Austin · Accepted Answer · 2012-08-27 11:34:32Z

28

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

edited Aug 27, 2012 at 11:34

answered Aug 24, 2012 at 12:56

Austin

6,0542 gold badges26 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

João Pimentel Ferreira · Accepted Answer · 2023-04-16 19:59:28Z

18

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>

edited Apr 16, 2023 at 19:59

answered Mar 22, 2021 at 11:57

João Pimentel Ferreira

16.5k13 gold badges98 silver badges131 bronze badges

1 Comment

Amirreza Over a year ago

this is the currect answer ,

Nikikiy SCC · Accepted Answer · 2017-12-20 12:30:29Z

10

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

edited Dec 20, 2017 at 12:30

answered Dec 20, 2017 at 8:32

Nikikiy SCC

1612 silver badges4 bronze badges

2 Comments

Nikikiy SCC Over a year ago

I have a similar problem and I fix it in this way

Francisco Daniel Over a year ago

Beware, if the object contains characters like ' it may corrupt hour HTML.

Robert Smith · Accepted Answer · 2023-10-12 11:57:45Z

3

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
}

edited Oct 12, 2023 at 11:57

Robert Smith

3461 gold badge3 silver badges17 bronze badges

answered Feb 14, 2021 at 18:03

HaRish. P

312 bronze badges

Comments

Jaskaran Singh · Accepted Answer · 2013-11-18 06:08:22Z

-10

Just do pass it like this :

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

answered Nov 18, 2013 at 6:08

Jaskaran Singh

2,58826 silver badges42 bronze badges

1 Comment

user2080225 Over a year ago

Passing 'this' won't work. The object passed is definitely not identifiable by 'this'. Downvoted.

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related