How to correct my spellbook buttons

[elthran]

(Note this is a simplistic version of my code for quick understanding) Instead of using span tags, I have found a better way to update things using javascript. Currently my code works this way:

On page load,

{% for i in count(8) %} 

<img id="spell_{{ i }}" onclick="sendToPy{ data: {{ spell[i].id }}}" src="{{ spell[i].img }}">

{% endfor %}

And my javascript looks like this:

var spell_1 = document.getElementById("spell_1");
spell1.src = spells[1].img;
spell1.onclick = "sendToPy{ data: {{ spells[1].id }}}"

This is the cleanest way to do it. You just grab my images and update the picture and what functions runs when you click them. Unfortunately, I don't understand your sendToPy code enough to get this to work.

The alternate, which I can do if you don't know how to fix this, is:

{% for i in count(8) %} 

<span id="spell_{{ i }}"><img onclick="sendToPy{ data: {{ spell[i].id }}}" src="{{ spell[i].img }}"></span>

{% endfor %}

And my javascript would look like this:

var spell_1 = document.getElementById("spell_1");
spell1.innerHTML= '<img onclick="sendToPy{ data: {{ spells[1].id }}}" src="{{ spells[1].img }}">'

I don't like this method as much, though I guess in theory it's basically the same. Can you give me a single comment here either saying how to solve the first method or to just go with the second? :D @klondikemarlen

[klondikemarlen]

I don't really get what you are trying to accomplish ... so my code might be completely wrong. I assumed that you were casting a spell ... then updating all the spells on the page as a result? I also assumed that you were returning the list of spells (from Python) that you where supposed to have on this page.

Assuming your JS function is:

function updateSpells(response, oldData) {
    "use strict";
    var spells = response.spells;  // Data returned by Python command function. A list of spells.
    var idOfSpellCast = oldData.id;  // From the data that you sent to Python. This might be usefull?
    var spell;
    var i;
    for (i=0; i<spells.length; i+=1) {
        spell = document.getElementById("spell_" + (i+1));
        spell.src = spells[i].img;
        spell.onclick = sendToPy(event, updateSpells, "cast_spell", {"id": spells[i].id } );  
        // note the lack of " " .. this is because 'sendToPy' is global variable (just a function lower down the page).
    }
}

If your HTML is:

Note the use of " " and ( ) and { } .. and ' '. onclick goes like this:

• sendToPy must be in quotes.
• event is always the first variable (no quotes).
• JS callback updateSpells has no quotes because it is a locally accessible JS function (a global variable).
• 'cast_spell' - python command in single quotes.
• Last is the data variable. This is a JSON style object. So in this case it is a dictionary/object constructor wrapped in curly braces { }. Each dict key is in single quotes 'id'. Each element is a piece of data. In this case a Jinja {{ ... }} variable. Currently a Integer but if you put in in qoutes '{{ ... }}' it would appear in Python command code as a string

  {% for i in count(8) %} 
  <img id="spell_{{ i }}" onclick="sendToPy(event, updateSpells, 'cast_spell', {'id': {{ spells[i].id }} } );" src="{{ spells[i].img }}">
  {% endfor %}

Your Python command code:

def cast_spell(hero, database, data, **kwargs):
    id = data['id']
    spell = database.get_object_by_id("Spell", id)
    hero.apply_effect(spell)  # I have no idea what goes here ...

    # I don't know why these are being updated? I am assuming this would be a list of all spells 
    # available on this page? You could even make it a dictionary instead?
    # Since spells[1] == spell_2 :P if you use a list.
    return jsonify(spells=[spell1, spell2, ..., spell8])

[elthran]

Thanks for the help @klondikemarlen !