Variablenname aus einzelnen Variablen zusammensetzen+ Wert zuweisen

Joschi1711

Mitglied
Hallo Leute,
Zuerst mal muss ich gestehen, dass ich blutiger Anfänger in der Materie bin, und in 4 Monaten mit einer Umschulung beginne, bei welcher ich auch Javascript lernen werde.^^

Zu meiner Frage:

Ich habe mehrere Radiobuttons, die eine Funktion aufrufen, durch welche mehrere Bilder ausgewählt werden können.

das Problem ist, das es unheimlich viele Bilder (Skills eines Spieles)sind.
nun habe ich mir gedacht, das ich variablen erstelle nach dem System

ed1f

Jedes Zeichen hat eine Bedeutung und ist ebenso einer Variablen zugeordnet.

e = Klasse (in dem Fall Elementarmagier)
d= Waffenart (in dem Fall Dolch)
1= Skillposition ( Position 1 von 5 Möglichen)
f= Einstimmung ( in dem Fall Feuer)

Es gibt daher 3 Variablen:
Variable1: klasse (beispiel oben ='e')
Variable2: imgw1 (beispiel oben ='d1')
Variable3: einstimmung (beispiel oben ='f')

diese 3 Variablen wähle ich durch Radiobuttons.

Desweitern habe ich mir eine Variablenliste erstellt in der Form:

//Ele-Dolch
ed1f='Drachenklaue_Icon.png';
ed2f='Lindwurm-Odem_Icon.png';
ed3f='Brennende_Geschwindigkeit_Icon.png';
ed4f='Feuerring_Icon.png';
ed5f='Feuergriff_Icon.png';

Ich möchte daher aus den Variablen klasse+img1+einstimmung eine Variable ed1f erhalten, die mir dann den Bildnamen ausgibt.
In der Art:

function changew1(imgw2)
{
image = document.getElementById('w1');
image.src = 'images/waffenskills/'+klasse+imgw1+einstimmung';
}

wichtig wäre mir noch, die Variablenliste mit den Bildnamen in eine extra datei auszulagern.

Kann mir da wer folgen und nen Tip geben ^^.

Ich bedanke mich mal schon vorab .

Gruß
Jörg
 
Desweitern habe ich mir eine Variablenliste erstellt in der Form:

//Ele-Dolch
ed1f='Drachenklaue_Icon.png';
ed2f='Lindwurm-Odem_Icon.png';
ed3f='Brennende_Geschwindigkeit_Icon.png';
ed4f='Feuerring_Icon.png';
ed5f='Feuergriff_Icon.png';
Es ist wohl möglich, Variablennamen dynamisch zusammenzubauen, IMO jedoch nicht zu empfehlen. Ich würde lieber ein assoziatives Array bzw. ein Objekt anlegen:
Code:
var spectoimg = {
    'ed1f': 'Drachenklaue_Icon.png',
    'ed2f': 'Lindwurm-Odem_Icon.png',
    // usw.
    'ed5f': 'Feuergriff_Icon.png'
}
Dann kannst du den Schlüssel so zusammenbauen, wie Du es bereits angedeutet hast und auf dieses Array zugreifen:
Code:
function changew1(klasse, imgw1, einstimmung)
{
    key = klasse + imgw1 + einstimmung;
    filename = spectoimg[key];
    image = document.getElementById('w1');
    image.src = 'images/waffenskills/' + filename;
}
Hoffe, das ist das, was du dir vorgestellt hast.
 
Zuletzt bearbeitet:
PS:
wichtig wäre mir noch, die Variablenliste mit den Bildnamen in eine extra datei auszulagern
Das geht am einfachsten, wenn Du die Definition des Objektes in Javascript-Syntax, wie in meinem ersten Codeblock, in eine Datei mit der Erweiterung .js schreibst und diese mit einem script-Tag einziehst.
 
vielen, vielen Dank @Sempervivum
habe es zum Teil versucht mit fester Variable 'klasse' und 'einstimmung' und es funktioniert
eine waffenfertigkeiten.js hatte ich bereits erstell und mittels
Code:
<script language="javascript" src="js/waffenfertigkeiten.js"></script>
eingebunden.
allerdings musste ich Argument 'klasse' und 'einstimmung' rauslassen, da diese extra aufgerufen werden.
Leider kann ich erst am Sonntag weiter drann werkeln und werde das Thema erst nach vollständiger Funktion hier posten und als gelöst markieren, wenn´s Recht ist ;)
 
So dieses Thema ist gelöst.
die benutzerdefinierten RadioButtons (Bilder in Popup)
Code:
<div id="waffenwahl">
  <div id="waffen2">
  
  
  
  <div class="waffe"><input type="radio" id="Zepter1" name="Hand1" title="Zepter" class="Zepter1" onclick="changew1('z1');changew2('z2');changew3('z3');" data-sdb-image="url('images/Waffen/zepter.png')"/></div>
  <div class="waffe"><input type="radio" id="Dolch1" name="Hand1" title="Dolch" class="Dolch1" onclick="changew1('d1');changew2('d2');changew3('d3');" data-sdb-image="url('images/Waffen/dolch.png')"/></div>
  <div class="waffe"><input type="radio" id="Stab" name="Hand1" title="Stab" class="Stab zweihand"  onclick="zweihand();changew1('s1');changew2('s2');changew3('s3');changew4('s4');changew5('s5');" data-sdb-image="url('images/Waffen/stab.png')"/></div>

  <div class="waffe"><img src="images//röm1.png"/> </div>
  
  <div class="waffe"><input type="radio" id="Dolch2" value="no" name="Hand2" class="Dolch2 zweithand" title="Dolch"  onclick="zweithand();changew4('d4');changew5('d5');" data-sdb-image="url('images/Waffen/dolch.png')"/></div>
  <div class="waffe"><input type="radio" id="Fokus2" value="no" name="Hand2" class="Fokus2 zweithand" title="Fokus"  onclick="zweithand();changew4('f4');changew5('f5');" data-sdb-image="url('images/Waffen/fokus.png')"/></div>
  
  </div>

  <div id="einstimmung">  
  <div class="waffe"><input type="radio" id="Feuer" name="Einstimmung" checked="checked" onclick="changees('f');changew1(wf1);changew2(wf2);changew3(wf3);changew4(wf4);changew5(wf5);"data-sdb-image="url('images/Waffen/feuer.png')"/></div>
  <div class="waffe"><input type="radio" id="Wasser" name="Einstimmung" onclick="changees('w');changew1(wf1);changew2(wf2);changew3(wf3);changew4(wf4);changew5(wf5);"data-sdb-image="url('images/Waffen/wasser.png')"/></div>
  <div class="waffe"><input type="radio" id="Luft" name="Einstimmung" onclick="changees('l');changew1(wf1);changew2(wf2);changew3(wf3);changew4(wf4);changew5(wf5);" data-sdb-image="url('images/Waffen/luft.png')"/></div>
  <div class="waffe"><input type="radio" id="Erde" name="Einstimmung" onclick="changees('e');changew1(wf1);changew2(wf2);changew3(wf3);changew4(wf4);changew5(wf5);" data-sdb-image="url('images/Waffen/erde.png')"/></div>
  </div>
  
  </div>

und hier das ausgelagert script in builds.js
Code:
klasse = 'e';
  einstimmung = 'f';
  function changees(es){
   einstimmung = es;
   
  }
 
  // Waffenwechsel 1.
 function changew1(imgw1)
  {  wf1 = imgw1;
  key = klasse + imgw1 + einstimmung;
  filename1 = spectoimg[key];
   skillname1 = spectoname[key];
  image = document.getElementById('w1');
  image.src = 'images/waffenskills/'+filename1;
  }
  // Waffenwechsel 2.
  function changew2(imgw2)
  {  wf2 = imgw2;
  key = klasse + imgw2 + einstimmung;
  filename2 = spectoimg[key];
   skillname2 = spectoname[key];
  image = document.getElementById('w2');
  image.src = 'images/waffenskills/'+filename2;
  }
  // Waffenwechsel 3.
  function changew3(imgw3)
  {  wf3 = imgw3;
  key = klasse + imgw3 + einstimmung;
  filename3 = spectoimg[key];
   skillname3 = spectoname[key];
  image = document.getElementById('w3');
  image.src = 'images/waffenskills/'+filename3;
  }
  // Waffenwechsel 4.
    function changew4(imgw4)
  {  wf4 = imgw4;
  key = klasse + imgw4 + einstimmung;
  filename4 = spectoimg[key];
   skillname4 = spectoname[key];
  image = document.getElementById('w4');
  image.src = 'images/waffenskills/'+filename4;
  }
  // Waffenwechsel 5.
  function changew5(imgw5)
  {  wf5 = imgw5;
  key = klasse + imgw5 + einstimmung;
  filename5 = spectoimg[key];
   skillname5 = spectoname[key];
  image = document.getElementById('w5');
  image.src = 'images/waffenskills/'+filename5;
  }
 //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

und noch ein Ausschnitt der Variablenzuordnung aus der waffenfertigkeiten.js

Code:
var spectoimg = {
   
//Ele-Dolch
'ed1f':'Drachenklaue_Icon.png',
'ed2f':'Lindwurm-Odem_Icon.png',
'ed3f':'Brennende_Geschwindigkeit_Icon.png',
'ed4f':'Feuerring_Icon.png',
'ed5f':'Feuergriff_Icon.png',
//....
}

var spectoname = {
   

//Ele-Dolch
'ed1f':'Drachenklaue ',
'ed2f':'Lindwurm-Odem ',
'ed3f':'Brennende Geschwindigkeit ',
'ed4f':'Feuerring ',
'ed5f':'Feuergriff ',
//......
}
 
Danke Dir... Das ist aber auch ein etwas grosses Projekt, dass ich hier begonnen habe, aber noch habe ich die Zeit dazu, und ich komme bei der Umschulung schon etwas vorbelastet an ^^.
Gut nun habe ich schon wieder ein Problem, welches ich aber in einem neuen Thema beschreiben werde.
Ich hoffe, dass ist richtig so, da ja dieser Abschnitt erledigt ist.
 
Hi

So wie du es nun machst klappt, wird aber bei grösserem Umfang unübersichtlich.

Schau dir mal TaffyDB an. Damit kannst verschiedenste Daten verwalten, filtern, etc. Wie in einer rationalen Datenbank
http://www.taffydb.com/
 
Zurück