How to pass variables to a dynamically created javascript onclick function?

Question

I am trying to create an onclick event that updates the values of a bootstrap modal element with results from a MySQL ajax query:

function UpdateModal($id){
  document.getElementById("modal_id").value=$id;
}

$results = GetMySQLResults();

button.onclick = function(){

        UpdateModal($results[0]["id"]);

}

However the problem is it always says "$result" is undefined when I click the button.

Is there a way to solve this without me having to dynamically create a modal?

And what's $results - assuming GetMySQLResults actually returns anything — mplungjan, Mar 15 '17 at 15:07
And is `GetMySQLResults` asynchronous? I bet it is and it's the source of the problem! — ibrahim mahrir, Mar 15 '17 at 15:08
@ibrahimmahrir eventhough it is async, how it will affect everytime as your button click event is not async. he specifically mention that everytime he get the error. I don't think async will take hrs to get response. Source is spell mistake, see my ans. — Abhinav, Mar 15 '17 at 15:21
I have a lot of code and didn't want to include it all. Results returns a couple of rows, which I use to generate buttons dynamically. — ClemsonCoder, Mar 15 '17 at 15:40
Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — ibrahim mahrir, Mar 15 '17 at 15:41
The problem is I can't pass values from the results to the button onclick function, since when the user clicks it. It says "undefined". — ClemsonCoder, Mar 15 '17 at 15:41
there could me multiple reasons, may be your $results and button click is not into same scope.. consider posting your js code atleast or try creating fiddle to help you better.. — Abhinav, Mar 15 '17 at 16:06

Abhinav · Answer 1 · 2017-03-15T15:37:27.807

1

Have a look..

$results = GetMySQLResults(); // You are collecting results into $results 

button.onclick = function(){

  UpdateModal($result[$i]["id"]); // You are sending parameter from $result 

}

Change your parameter as

 UpdateModal($results[$i]["id"]);

so basically you are not collecting any results into $result, that is the reason why you get the error..

basically a spell mistake $results has actual value (assuming GetMySQLResults()) returns value, and UpdateModal has parameter $result which is undefined..

edited Mar 15 '17 at 15:37

answered Mar 15 '17 at 15:17

Abhinav

1,202
1
8
12

1

He added the 's' to $result to make it $results. I had to read it trice as well to notice. – Shilly Mar 15 '17 at 15:27
did't it clear from my comments I added into code block and on the statement below ... lol :) – Abhinav Mar 15 '17 at 15:34
Results has information. The problem is that when the user clicks on the button it says that "results[$i]" is undefined. – ClemsonCoder Mar 15 '17 at 15:43
@ClemsonCoder looks like you have edited the post, previously it was $result. Nevermind, consider posting your full JS function... – Abhinav Mar 15 '17 at 16:03

score 1 · Accepted Answer · answered Mar 15 '17 at 17:44

1

Fixed it. The problem was that $i wasn't declared and even if it was, it was updated to the last $i value, not the iteration. Also the problem was that $results wasn't declared globally.

To solve this I did the following:

var $globalResults;

...
{
   button.id = $i;

   button.onclick = function(event){
   var $j = event.currentTarget.id;
      UpdateModal($globalResult[$j]["id"]);
   }
}

answered Mar 15 '17 at 17:44

ClemsonCoder

97
9

thats what my comment refers to regarding scope of declaration of your variables and function... consider upvote if it helps you :) – Abhinav Mar 16 '17 at 05:59

How to pass variables to a dynamically created javascript onclick function?

2 Answers2