Getting error when passing object in onclick event

Question

Getting error when passing object in onclick event fiddle

(function() {
  function a() {
    var x = [{
      "name": "main",
      "data": {"name":'john'}
    }, {
      "name": "sub",
      "data": {"name":'guru'}
    }, {
      "name": "lower",
      "data": {"name":'jack'}
    }]
    for (var i = 0; i < x.length; i++) {
      var data = "<span onclick='getInfo(" + x[i].data + ")'>main </span>";
      data += "<span onclick='getInfo(" + x[i].data + ")'>sub </span>"
      data += "<span onclick='getInfo(" + x[i].data + ")'>lower</span><br>"
      $('#data').prepend(data);
    }
  }
  a()
})()

Check the web-inspector, th html is rendering as onclick="getInfo([object Object])". You should preferably use javascript or jQuery click handlers. — Shaunak D
– Shaunak D, Commented Jun 6, 2016 at 6:55
you have to stringify and pass the parameter check this working solution jsfiddle.net/vigneshvdm/fddr0bnv/29 — Vignesh Subramanian
– Vignesh Subramanian, Commented Jun 6, 2016 at 7:20

Nemanja Todorovic · Accepted Answer · 2016-06-06 06:57:57Z

2

You should change way in which your data is generated to this:

var data = "<span onclick='getInfo(" + JSON.stringify(x[i].data) + ")'>main </span>";

Without this html that is generated is this:

<span onclick="getInfo([object Object])">main </span>

answered Jun 6, 2016 at 6:57

Nemanja Todorovic

2,8802 gold badges21 silver badges38 bronze badges

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

Comments

Basheer Kharoti · Accepted Answer · 2016-06-06 07:18:02Z

You were trying to assign an object rather its name so that was causing the error. Try it this way

for (var i = 0; i < x.length; i++) {
  var data = "<span onclick='getInfo(\"" + x[i].data.name + "\")'>main </span>";
  data += "<span onclick='getInfo(\"" + x[i].data.name + "\")'>sub </span>"
  data += "<span onclick='getInfo(\"" + x[i].data.name + "\")'>lower</span><br>"
  $('#data').prepend(data);
}

Better use Jquery onclick function something like

for (var i = 0; i < x.length; i++) {
  var data = "<span data-name='\"" + x[i].data.name + "\"' class='notify'>main</span>";
  data += "<span data-name='\"" + x[i].data.name + "\"' class='notify'>sub </span>"
  data += "<span data-name='\"" + x[i].data.name + "\"' class='notify'>lower</span><br>"
  $('#data').prepend(data);
}

$(document).on('click', '.notify', function(e) {   console.log($(this).attr('data-name')); });

Jquery Fiddle

Or as Suggest by @Nemanja Todorovic you can cast Json to string

    for (var i = 0; i < x.length; i++) {
       var data = "<span data-info='\"" + JSON.stringify(x[i].data)  + "\"' class='notify'>main</span>";
       data += "<span data-info='\"" + JSON.stringify(x[i].data) + "\"' class='notify'>sub </span>"
       data += "<span data-info='\"" + JSON.stringify(x[i].data) + "\"' class='notify'>lower</span><br>"
       $('#data').prepend(data);
    }

 $(document).on('click', '.notify', function(e) {   console.log($(this).attr('data-info')); });

Final Fiddle

Collectives™ on Stack Overflow

Getting error when passing object in onclick event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest