Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>(<em>updated jsfiddle revision link to #11 which includes both solutions</em>)</p> <p>Looks like this could be a working fiddle: <a href="http://jsfiddle.net/RPwLK/11/" rel="nofollow">http://jsfiddle.net/RPwLK/11/</a></p> <p>A minor problem: you have an extra <code>'</code> on line 30 with the (second) <code>alert</code> call - the string literal was not closed correctly (or rather another was being opened). After that I was able to investigate and come up with the following conclusion (2 problems)...</p> <hr> <p><strong>The first problem was with the variable override</strong> here:</p> <pre><code>function displayBossMessage(boss,message,options,timer){ boss = bosses[boss]; // this line, boss was a string, now it will be an object </code></pre> <p>And the later usage in the same function here:</p> <pre><code>if(typeof options[option].response != 'undefined'){ displayBossMessage(boss,options[option].response,'',true); // first arg is now an object </code></pre> <p><strong>The solution is to</strong> create a reference to the original <code>boss</code> when it was a string like:</p> <pre><code>function displayBossMessage(boss,message,options,timer){ var origBoss = boss; // let's remember what it was in its original string form boss = bosses[boss]; </code></pre> <p>And use it like so:</p> <pre><code>if(typeof options[option].response != 'undefined'){ displayBossMessage(origBoss,options[option].response,'',true); // now we're dealing with a string ref </code></pre> <hr> <p>The second problem is the reference to <code>option</code> within the <code>for</code> loop. It was always referencing the <em>last</em> value since the <code>$(document).on('click'...</code> is always delayed (asynchronous). There are a number of ways to solve this. I chose to use <code>bind</code> and pass in an argument with a reference to the value of <code>option</code> for each specific iteration.</p> <p>Notice that in the original <code>option</code> is in the async function but not in a closure (<code>for</code> is not a closure):</p> <pre><code>for(option in options){ //... $(document).on('click', (boss.div)+' button[name="'+i+'"]', function(){ options[option].func(); // here option is always the last item in options </code></pre> <p>So introduce an argument conveniently called <code>option</code> in the callback function for the click handler:</p> <pre><code>$(document).on('click', (boss.div)+' button[name="'+i+'"]', function(option){ // here options[option].func(); // and now option is whatever the argument value is </code></pre> <p>And don't forget to pass it in the function declaration via bind:</p> <pre><code> $(document).on('click', (boss.div)+' button[name="'+i+'"]', function(option){ options[option].func(); // ... }.bind(this,option)); // here we're passing whatever option is for the specific iteration as the first argument of the callback function </code></pre> <p>Note, <code>this</code> is just the scope, and each subsequent parameter for <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" rel="nofollow"><code>bind</code> (see MDN)</a> after the first corresponds to the arguments in the function definition.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload