onclick attribute not working even after the function is defined

Question

I'm dynamically populating html by using a for loop like this

function htmlpopulate() {
  /*some DOM manipulations*/
  setInterval(loadhtml, 5000); //getting live data
}

function loadhtml {
  activediv.innerHTML = '';
  for (i = 0; i < userarray.length; i++) {
    var temp = userarray[i].trim();
    activediv.innerHTML += '<p onclick="makecall(' + "'" + temp + "'" + ');return false;")">' + temp + '</p><br/>';
  }
}

function makecall(data) {
  console.log(data);
}

output:makecall is not defined
how to make the inline function to call that defined function?

score 2 · Accepted Answer · answered Nov 04 '15 at 14:52

2

function makecall must be defined in the global context:

window.makecall = function (data) {
  console.log(data);
};

Also, you need to sort out quotes and parenthesis in

activediv.innerHTML += '<p onclick="makecall(' + "'" + temp + "'" + 
  ');return false;")">' + temp + '</p><br/>';

you don't need )" after return false;".

answered Nov 04 '15 at 14:52

Igor

15,833
1
27
32

its too a type dude! `window.makecall` is a useful resource – Phaneendra Charyulu Kanduri Nov 04 '15 at 15:36
@PhaneendraCharyuluKanduri - I don't understand.What is "its too a type dude"? – Igor Nov 04 '15 at 15:38
i've said that its a typing mistake. in a friendly manner :-) – Phaneendra Charyulu Kanduri Nov 04 '15 at 16:15

Rajesh · Answer 2 · 2015-11-05T06:52:15.227

1

Following is the JSFiddle representing dynamically created buttons with click function.

You can also try this if you are not able to bind function:

document.getElementById("btnID").onclick = makeCall;

Code

function createHTML(){
    var div = document.getElementById("content");
    var _html = "";
 for(var i=0; i<5;i++){
     _html += "<button onclick='notify("+i+")'>btn " + i +"</button>";
    }
    div.innerHTML = _html;
}

function notify(str){
 console.log("Notify" + str);
}


function print(data) {
 console.log(data);
}

function registerEvent(){
    var btnList = document.getElementsByTagName("button");
 document.getElementById("btnID").onclick = function(){ print(btnList) };
}

(function(){
 createHTML();
    registerEvent();
})()

<div id="content"></div>
<button id="btnID">BTN ID</button>

edited Nov 05 '15 at 06:52

answered Nov 03 '15 at 18:07

Rajesh

24,354
5
48
79

what is `btnTest` in `document.getElementById("btnTest").onclick = function(){ print(btnList)};` – Phaneendra Charyulu Kanduri Nov 04 '15 at 14:30
Sorry! its a typo. It should be `btnID`. I'll update my answer – Rajesh Nov 04 '15 at 14:37
how is `notify()` working over there in `JSFiddle`. if it does i dont have to ask this question(im working on `android-crosswalk`) and another 2. i have to pass different argument for each button, to recieve unique argument for representing that button, help – Phaneendra Charyulu Kanduri Nov 04 '15 at 16:06
@PhaneendraCharyuluKanduri, [update JSFiddle](http://jsfiddle.net/RajeshDixit/vxbwx8qb/8/) with passing flag to `notify()`. Also try *loading js after DOM* is rendered. You can simulate on JSFiddle. Change JS load type to `onLoad` from body and these will not work. Hope it helps. Also I have updated my answer to show same – Rajesh Nov 05 '15 at 06:50
its so cool. global decleration `window.function_name` has worked as said by @Igor – Phaneendra Charyulu Kanduri Nov 05 '15 at 07:00
Ideally, you should avoid using global scope. It is considered as bad practice. You can refer following [post](http://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use) for reference. – Rajesh Nov 05 '15 at 07:00

score 0 · Answer 3 · answered Nov 03 '15 at 18:02

0

There, you're defining makecall(), but you need to actually call it afterward, like so:

makecall(the data you want to use);

answered Nov 03 '15 at 18:02

Yami Medina

670
10
26

onclick attribute not working even after the function is defined

3 Answers3

Code