Skill Calculator erstellen
Hallo HTML-Community,
ich spiele mit dem Gedanken für ein Game einen Skill Calculator zu erstellen vergleichbar mit dem von z.B. Diablo3 (Beispiellink: https://eu.battle.net/d3/de/calculator/barbarian).
Mein Gedanke war, dass ich eine Tabelle mit Dropdownfelder anlege, alle Informationen dort einpflege die zur Auswahl stehen und nach Auswahl der entsprechenden Felder würde ich die Daten aufbereiten via Script und daraus einen Link erzeugen lassen der x Tage bestehen bleibt.
Ist diese Vorgehensweise sinnvoll oder gehe ich das Thema falsch an?
PS: Eine Template gibt es nicht zufällig irgendwo? :D
Gruß Nighty
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js_webseite/jquery.js"></script>
<style>
.first1,.first2,.first3,.first4{
display:none;
}
</style>
</head>
<body>
<p class="aus">autos</p>
<div class="first">
<select id="eins">
<option value="" ></option>
<option value="ford" >ford</option>
<option value="opel" >opel</option>
<option value="vw" >vw</option>
</select>
</div>
<div class="first2">
<select id="zwei">
<option value="" ></option>
<option value="corsa"> Corsa</option>
<option value="kadett">Kadett</option>
<option value="astrar">Astra</option>
</select>
</div>
<div class="first1">
<select id="drei">
<option value="" ></option>
<option value="polo">polo</option>
<option value="passart">passart</option>
<option value="turan">turan</option>
</select>
</div>
<div class="first3">
<select id="vier">
<option value="" ></option>
<option value="esscord">esscord</option>
<option value="fieste">fiesta</option>
<option value="kar">kar</option>
</select>
</div>
<button id="senden">
Senden
</button>
<script>/<![CDATA[
$('#eins').on("change",function(){
p1=this.value;
for(a=1;a<=4;a++){
$('.first'+a).css('display','none');
}
if(p1=='ford'){
$('.aus').html('ford gewählt');
$('.first3').css('display','block');
$('#vier').click(function(){
p2=this.value;
});
}else
if(p1=='opel'){
$('.aus').html('opel gewählt')
$('.first2').css('display','block');
$('#zwei').click(function(){
p2=this.value;
});
} else
if(p1=='vw'){
$('.aus').html('vw gewählt')
$('.first1').css('display','block');
$('#drei').click(function(){
p2=this.value;
});
}
$('#senden').click(function(){
alert('Du hast '+p1+' gewählt mit den auto Typ '+p2)
})
});
</script>
</body>
</html>