cutting down on variables

[tules]

continuing from this thread

I'm still pretty new to javascript (my knowledge of it pretty much ends at adding and subtracting numbers) so i'm having trouble turning something like this:

SPOILER: Click to show

{foreach $[plugin.settings.monster]}
{if $[plugin.settings.monster.area] == lagoon}
{if $[plugin.settings.monster.oddeven] == 1}<tr>{/if} 19
<td>
<div class="meow" style="min-height: 130px;{if $[plugin.settings.monster.oddeven] == 1}margin-right: 10px;{/if} margin-bottom: 10px;">
<h1 style="font-size: 15px;">$[plugin.settings.monster.monster_name]</h1><br />
<h2><img src="$[plugin.settings.monster.monster_image]" style="height: 75px; width: 75px;"></h2>
<table class="beststats">
{if $[plugin.settings.monster.hp]}<tr><td colspan="4">$[plugin.settings.monster.hp] HP</td></tr>{/if}
<tr>
{if $[plugin.settings.monster.atk]}<td>$[plugin.settings.monster.atk] ATK</td>{/if}
{if $[plugin.settings.monster.def]}<td>$[plugin.settings.monster.def] DEF</td>{/if}
{if $[plugin.settings.monster.rec]}<td>$[plugin.settings.monster.rec] REC</td>{/if}
{if $[plugin.settings.monster.spd]}<td>$[plugin.settings.monster.spd] SPD</td>{/if}
</tr>
</table>
<p>$[plugin.settings.monster.monster_description]</p>
</div>
</td>
{if $[plugin.settings.monster.oddeven] == 1}
{if $[plugin.settings.monster.oddeven] == 2}</tr>{/if}
{/if}
{/if}
{/foreach}

into javascript. the best i can think of with my knowledge is to make something like this:

SPOILER: Click to show

if (pb.plugin.get('bestiary').settings.monster.area = lagoon) {
var monster = pb.plugin.get('bestiary').settings.monster.monster_name;
var monicon = pb.plugin.get('bestiary').settings.monster.monster_image;
var mondesc = pb.plugin.get('bestiary').settings.monster.monster_description;
var monhp = pb.plugin.get('bestiary').settings.monster.hp;
var monatk = pb.plugin.get('bestiary').settings.monster.atk;
var mondef = pb.plugin.get('bestiary').settings.monster.def;
var monrec = pb.plugin.get('bestiary').settings.monster.rec;
var monspd = pb.plugin.get('bestiary').settings.monster.spd;

document.getElementById("lagoon-monname").innerHTML = monster;
document.getElementById("lagoon-monicon").src = monicon;
document.getElementById("lagoon-mondesc").innerHTML = mondesc;
document.getElementById("lagoon-monhp").innerHTML = monhp;
document.getElementById("lagoon-monatk").innerHTML = monatk;
document.getElementById("lagoon-mondef").innerHTML = mondef;
document.getElementById("lagoon-monrec").innerHTML = monrec;
document.getElementById("lagoon-monspd").innerHTML = monspd;
}

but i keep getting undefines or just nothing at all. i would really appreiciate if someone could point me in the right direction or give me an example of how it's supposed to be done

edit; i realized i would need a loop to sort through all the stuff in the autoform so i wrote something like this but it didn't work: 

SPOILER: Click to show

var beast = pb.plugin.get('bestiary').settings.monster

var beastie = {}

for(a = 0; a < pb.monster_id.length;a++) {

beastie = {

monName: beast[a].monster_name,

monImg: beast[a].monster_image,

monDesc: beast[a].monster_description,

monHp: beast[a].hp,

monAtk: beast[a].atk,

monDef: beast[a].def,

monRec: beast[a].rec,

monSpd: beast[a].spd

};

}

document.getElementById(test).innerHTML = beastie;

[Lynx]

tules said:

if (pb.plugin.get('bestiary').settings.monster.area = lagoon) {
var monster = pb.plugin.get('bestiary').settings.monster.monster_name;
var monicon = pb.plugin.get('bestiary').settings.monster.monster_image;
var mondesc = pb.plugin.get('bestiary').settings.monster.monster_description;
var monhp = pb.plugin.get('bestiary').settings.monster.hp;
var monatk = pb.plugin.get('bestiary').settings.monster.atk;
var mondef = pb.plugin.get('bestiary').settings.monster.def;
var monrec = pb.plugin.get('bestiary').settings.monster.rec;
var monspd = pb.plugin.get('bestiary').settings.monster.spd;

document.getElementById("lagoon-monname").innerHTML = monster;
document.getElementById("lagoon-monicon").src = monicon;
document.getElementById("lagoon-mondesc").innerHTML = mondesc;
document.getElementById("lagoon-monhp").innerHTML = monhp;
document.getElementById("lagoon-monatk").innerHTML = monatk;
document.getElementById("lagoon-mondef").innerHTML = mondef;
document.getElementById("lagoon-monrec").innerHTML = monrec;
document.getElementById("lagoon-monspd").innerHTML = monspd;
}

A couple things right off:

if (pb.plugin.get('bestiary').settings.monster.area = lagoon) <-- comparisons use a double equal sign. As you have it, you're trying to assign what's in lagoon into your plugin settings. Also, it looks like lagoon is a string value entered in as an area in the plugin, so it should be in quotes.

if (pb.plugin.get('bestiary').settings.monster.area == "lagoon")


Next up - all of those document.getElementById's that you have need to have matching ID's in the HTML. I didn't see any ID's in your HTML with names of lagoon-monname, lagoon-monicon, etc., so there's nothing for it to get.


I'm going to be gone for a few days, but maybe another coder can jump in. That's just what I noticed at quick glance. One question though, where did you get the JS that's in your plugin?

[tules]

sorry for the confusion - i think i edited the plugin after i posted it in that thread. as it is now, those classes are present.

i'm assuming you're talking about the JS that the modal window uses — i already have a different plugin that's has the JS installed so i didn't include it in this one. this is actually my first time working with the user interface section of the plugin creation so i wanted to keep these codes different from the other plugin.

I think since I'm using an autoform to fill these things out, my first try isn't going to work out. As I'm understanding it, the autoform puts everything into an array and i need to use a loop to pull it out, which is what my second try was but that didn't work out at all either

var beast = pb.plugin.get('bestiary').settings.monster
var beastie = {}

for (a=0;a<beast.length;a++){

    beastie = {
    monName: beast[a].monser_name,
        monDesc: beast[a].monster_description
         
    };
};

$(document).ready(function() {
$('#test').html('<b>' + monName + '</b><br /><b>' + monName + '</b>');
};

this is what i'm looking at right now. i found this thread where someone seemed to be doing something similar but i think i'm still missing pieces. at this point i'm just trying to get something to show up but the console keeps giving me "Reference error: monName is not defined"

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Aug 10, 2015 21:05:39 GMT -8 tules said:

sorry for the confusion - i think i edited the plugin after i posted it in that thread. as it is now, those classes are present.

i'm assuming you're talking about the JS that the modal window uses — i already have a different plugin that's has the JS installed so i didn't include it in this one. this is actually my first time working with the user interface section of the plugin creation so i wanted to keep these codes different from the other plugin.

I think since I'm using an autoform to fill these things out, my first try isn't going to work out. As I'm understanding it, the autoform puts everything into an array and i need to use a loop to pull it out, which is what my second try was but that didn't work out at all either

var beast = pb.plugin.get('bestiary').settings.monster
var beastie = {}

for (a=0;a<beast.length;a++){

    beastie = {
    monName: beast[a].monser_name,
        monDesc: beast[a].monster_description
         
    };
};

$(document).ready(function() {
$('#test').html('<b>' + monName + '</b><br /><b>' + monName + '</b>');
};ime is not defined"

I won't pretend to be lord over your problems but your accessing the data types in the wrong manner. You are trying to follow a model of someone I helped previously, however you aren't creating and accessing objects correctly. 
Here is an example www.w3schools.com/js/tryit.asp?filename=tryjs_objects_create_2
Your monName is saved in the object beastie, so you must access it so, however You are currently saving only one beast to beastie and then replacing it's data over and over again.

var beast = pb.plugin.get('bestiary').settings.monster
var beastie = new Array()
for (a=0;a<beast.length;a++){
beastie[ a ] = {//This will save to beastie as an array with objects in it
monName: beast[ a ].monser_name,
monDesc: beast[ a ].monster_description
};
};
$(document).ready(function() {
$('#test').html('<b>' + beastie[0].monName + '</b><br /><b>' + beastie[1].monName + '</b>');//Specified the index number of the monster data I wished to pull and also a . to indicate that we are accessing an object propertyname
};

[tules]

No it's fine. I have no idea what i'm doing when it comes to javascript lmao

Thank you for your help though P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓! it's working now ~    

is there a way to turn this into a loop so i don't have to repeat monName[0].monster_name, monName[1].monster_name, etc. over and over again    ?

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Aug 11, 2015 15:43:00 GMT -8 tules said:

No it's fine. I have no idea what i'm doing when it comes to javascript lmao

Thank you for your help though P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓! it's working now ~    

is there a way to turn this into a loop so i don't have to repeat monName[0].monster_name, monName[1].monster_name, etc. over and over again    ?

It depends on where you want them viewed.

var monsternames = ''
for (a=0;a<beast.length;a++){

monsternames+= 'Beast '+a+' is '+beastie[a].monName+'. It is described as: '+beastie[a].monDesc+'<br>'
};
$(document).ready(function() {

$('#test').html(monsternames);
};


[tules]

This is exactly what i needed thank you !