[GELÖST] Auswahlmenü - HTML Code laden

mot96 · 02. Mai 2017

Input per Enter weiter klicken...

Hallo Zusammen,

auch wenn es nicht nur um Javascript geht, schreibe ich hier mal mein Problem.

Mir wurde bis jetzt ja immer super geholfen

Ich habe jetzt auf einer Berechnungsgrundlage, eine (Tabelle) erstellt:

Klappt super!

Nun ist es aber so, dass es nicht nur ein TW (Torwart) gibt, sondern auch OM/DM/LM/RM/ST,

Dafür würde ich auch die Tabelle schreiben (andere Berechnung, da andere Skills...)

Welche Möglichkeit habe ich jetzt das ganze am besten per Auswahlmenü (TW/DM...), die richtige Tabelle zu laden?
Möchte eigentlich nicht jede Tabelle einzeln (pro Seite) erstellen.

Mein Code (Bei Fehlern/Verbesserung, wäre ich für Tipps dankbar, bin erst neu dabei!):

HTML:

<!DOCTYPE html>
<html>

<head>
	<title>Rechner</title>
	<style type="text/css" media="screen">
form {
	border: thin solid #666;
	width: 25em;
	padding: 1em;
}

legend {
	font-size: 1.5em;
	margin-bottom: 1em;
}

input[type=number] {
	text-align: auto;
}

label,
span,
output {
	display: inline-block;
}

form p {
	font-weight: bold;
}

output {
	width: 4em;
	text-align: right;
}

		img {
  width: 5%; 
  height: auto;
}

	</style>
	
</head>

<body>
	<h1>Berechnung der Stärke von Spielern</h1>
	<main>
		<form id="Rechner">
		<legend>TW</legend>
		<p></p>

		<input type="number" min="0" id="skill1" value=""><output id="betrag1" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/catch_safety.gif" alt="x">
		<label for="skill1">Fangsicherheit</label>
		
		<input type="number" min="0" id="skill2" value=""><output id="betrag2" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/penalty_area_safety.gif" alt="x">
		<label for="skill2">Strafraum</label> 
		&nbsp
		<input type="number" min="0" id="skill3" value=""><output id="betrag3" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/fitness.gif" alt="x">
		<label for="skill3">Fitness</label>
		&nbsp
		<input type="number" min="0" id="skill4" value=""><output id="betrag4" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/speed.gif" alt="x">
		<label for="skill4">Geschwindigkeit</label>
		&nbsp
		<input type="number" min="0" id="skill5" value=""><output id="betrag5" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/duell.gif" alt="x">
		<label for="skill5">Zweikampf</label>
		&nbsp
		<input type="number" min="0" id="skill6" value=""><output id="betrag6" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/endurance.gif" alt="x">
		<label for="skill6">Ausdauer</label>
		&nbsp 
		<input type="number" min="0" id="skill7" value=""><output id="betrag7" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/shot.gif" alt="x">
		<label for="skill7">Schuss</label>
		&nbsp
		<input type="number" min="0" id="skill8" value=""><output id="betrag8" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/two_footed.gif" alt="x">
		<label for="skill8">Beidfüssigkeit</label>
		&nbsp
		<input type="number" min="0" id="skill9" value=""><output id="betrag9" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/header.gif" alt="x">
		<label for="skill9">Kopfball</label>
		&nbsp
		<input type="number" min="0" id="skill10" value=""><output id="betrag10" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/cover.gif" alt="x">
		<label for="skill10">Deckungsverhalten</label>
		&nbsp 
		<input type="number" min="0" id="skill11" value=""><output id="betrag11" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/pass.gif" alt="x">
		<label for="skill11">Pass</label>
	    &nbsp&nbsp&nbsp
		<input type="number" min="0" id="skill12" value=""><output id="betrag12" for="">&nbsp0</output>
		<img src="http://fussballcup.de/designs/redesign/images/icons/running.gif" alt="x">
		<label for="skill12">Laufbereitschaft</label>
	
			<p><span>Gesamtstärke:</span><output id="gesamt" for="">0</output></p>
		</form>
		
		<script type="text/javascript" src="/extensions/Selfhtml/js/jquery/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
		//<![CDATA[
		document.addEventListener('DOMContentLoaded', function () {
			function rechne() {
				var skill1 = document.getElementById('skill1'), 
					skill2 = document.getElementById('skill2'),
					skill3 = document.getElementById('skill3'),
					skill4 = document.getElementById('skill4'),
					skill5 = document.getElementById('skill5'),
					skill6 = document.getElementById('skill6'),
					skill7 = document.getElementById('skill7'),
					skill8 = document.getElementById('skill8'),
					skill9 = document.getElementById('skill9'),
					skill10 = document.getElementById('skill10'),
					skill11 = document.getElementById('skill11'),
					skill12 = document.getElementById('skill12');
			
          			var summe1 = skill1.valueAsNumber / 28 * 5;
				    summe1 = summe1.toFixed(3);
				    document.getElementById('betrag1')
					.value = summe1;
 
					var summe2 = skill2.valueAsNumber / 28 * 5;
					summe2 = summe2.toFixed(3);
				 document.getElementById('betrag2')
					.value = summe2;
					
					var summe3 = skill3.valueAsNumber / 28 * 4;
					summe3 = summe3.toFixed(3);
				 document.getElementById('betrag3')
					.value = summe3;
					
					var summe4 = skill4.valueAsNumber / 28 * 3;
					summe4 = summe4.toFixed(3);
				 document.getElementById('betrag4')
					.value = summe4;
					
					var summe5 = skill5.valueAsNumber / 28 * 2;
					summe5 = summe5.toFixed(3);
				 document.getElementById('betrag5')
					.value = summe5;
					
					var summe6 = skill6.valueAsNumber / 28 * 1;
					summe6 = summe6.toFixed(3);
				 document.getElementById('betrag6')
					.value = summe6;
					
					var summe7 = skill7.valueAsNumber / 28 * 1;
					summe7 = summe7.toFixed(3);
				 document.getElementById('betrag7')
					.value = summe7;
					
					var summe8 = skill8.valueAsNumber / 28 * 1;
					summe8 = summe8.toFixed(3);
				 document.getElementById('betrag8')
					.value = summe8;
				
				var summe9 = skill9.valueAsNumber / 28 * 1;
					summe9 = summe9.toFixed(3);
				 document.getElementById('betrag9')
					.value = summe9;
					
					var summe10 = skill10.valueAsNumber / 28 * 1;
					summe10 = summe10.toFixed(3);
				 document.getElementById('betrag10')
					.value = summe10;
					
					var summe11 = skill11.valueAsNumber / 28 * 1;
					summe11 = summe11.toFixed(3);
				 document.getElementById('betrag11')
					.value = summe11;
				
				var summe12 = skill12.valueAsNumber / 28 * 1;
					summe12 = summe12.toFixed(3);
				 document.getElementById('betrag12')
					.value = summe12;
			
		
	var gesamt = skill1.valueAsNumber / 28 * 5 + skill2.valueAsNumber / 28 * 5 + skill3.valueAsNumber / 28 * 4 + skill4.valueAsNumber / 28 * 3 + skill5.valueAsNumber / 28 * 2 + skill6.valueAsNumber / 28 * 1 + skill7.valueAsNumber / 28 * 1 + skill8.valueAsNumber / 28 * 1 + skill9.valueAsNumber + skill10.valueAsNumber / 28 * 1 + skill11.valueAsNumber / 28 * 1 + skill12.valueAsNumber / 28 * 1
	gesamt = gesamt.toFixed(2);
		document.getElementById('gesamt')
			.value = gesamt;
			 
			}
			document.getElementById("Rechner")
				.addEventListener("input", rechne);

		});
		//]]>

	</script>
	</main>
</body>

</html>

mot96 · 04. Mai 2017

OK, mache es jetzt anders...

Noch eine Frage bleibt:

Wie kann ich den die Input Felder per Enter drücken weitergehen?

Habe das hier gefunden:

HTML:

		$('#Rechner').on('keydown', 'input', function (event) {
    if (event.which == 13) {
        event.preventDefault();
        var $this = $(event.target);
        var index = parseFloat($this.attr('data-index'));
        $('[data-index="' + (index + 1).toString() + '"]').focus();
    }
});

Leider klappt das noch nicht, habe ich noch was vergessen?

kkapsner · 06. Mai 2017

mot96 schrieb:
Leider klappt das noch nicht, habe ich noch was vergessen?

Hast du denn das "data-index"-Attribut bei den <input>s auch gesetzt?

mot96 · 07. Mai 2017

kkapsner schrieb:
Hast du denn das "data-index"-Attribut bei den <input>s auch gesetzt?

Mittlerweile schon, aber ohne Erfolg

HTML:

<!DOCTYPE html>
<html>

<head>
	<title>Rechner</title>
	<style type="text/css" media="screen">
form {
    
	border: thin solid #666;
	width: 27em;
	padding: 1em;

}

legend {
	font-size: 1.5em;
	margin-bottom: 1em;
}

input[type=number] {
	text-align: auto;
}

label,
span,
output {
	display: inline-block;
}

form p {
	font-weight: bold;
}

output {
	width: 4em;
	text-align: right;
}

		img {
  width: 5%; 
  height: auto;
}

	</style>
	
</head>

<body>

	<main>

	<script>
$('#TWRechner').on('keydown', 'input', function (event) {
    if (event.which == 13) {
        event.preventDefault();
        var $this = $(event.target);
        var index = parseFloat($this.attr('data-index'));
        $('[data-index="' + (index + 1).toString() + '"]').focus();
    }
});
</script>

		<form id="TWRechner">
		<legend>TW</legend>
		<p></p>
	
<table>

		<input type="number" data-index="1" min="0" id="skill1"  value=""><output id="betrag1"  for="">0</output>
	
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/catch_safety.gif" alt="x">&nbsp
		<label for="skill1">Fangsicherheit</label>
		
		<input type="number"data-index="2" min="0" id="skill2" value=""><output id="betrag2" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/penalty_area_safety.gif" alt="x">&nbsp
		<label for="skill2">Strafraum</label> 
	
		<input type="number" data-index="3" min="0" id="skill3" value=""><output id="betrag3" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/fitness.gif" alt="x">&nbsp
		<label for="skill3">Fitness</label>
	
		<input type="number" data-index="4" min="0" id="skill4" value=""><output id="betrag4" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/speed.gif" alt="x">&nbsp
		<label for="skill4">Geschwindigkeit</label>
		
		<input type="number" data-index="5" min="0" id="skill5" value=""><output id="betrag5" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/duell.gif" alt="x">&nbsp
		<label for="skill5">Zweikampf</label>
		
		<input type="number" data-index="6" min="0" id="skill6" value=""><output id="betrag6" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/endurance.gif" alt="x">&nbsp
		<label for="skill6">Ausdauer</label>
	
		<input type="number" data-index="7" min="0" id="skill7" value=""><output id="betrag7" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/shot.gif" alt="x">&nbsp
		<label for="skill7">Schuss</label>
		
		<input type="number" data-index="8" min="0" id="skill8" value=""><output id="betrag8" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/two_footed.gif" alt="x">&nbsp
		<label for="skill8">Beidfüssigkeit</label>
		
		<input type="number" data-index="9" min="0" id="skill9" value=""><output id="betrag9" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/header.gif" alt="x">&nbsp
		<label for="skill9">Kopfball</label>
	
		<input type="number" data-index="10" min="0" id="skill10" value=""><output id="betrag10" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/cover.gif" alt="x">&nbsp
		<label for="skill10">Deckungsverhalten</label>
		
		<input type="number" data-index="11" min="0" id="skill11" value=""><output id="betrag11" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/pass.gif" alt="x">&nbsp
		<label for="skill11">Pass</label>
	    &nbsp
		<input type="number"  data-index="12" min="0" id="skill12" value=""><output id="betrag12" for="">0</output>
		&nbsp <img src="http://fussballcup.de/designs/redesign/images/icons/running.gif" alt="x">&nbsp
		<label for="skill12">Laufbereitschaft</label>
	
			<p><span>Gesamtstärke:</span><output id="gesamt" for="">0</output></p>

		</form>
		
	<script type="text/javascript">
	
		//<![CDATA[
		document.addEventListener('DOMContentLoaded', function () {
			function rechne() {
				var skill1 = document.getElementById('skill1'), 
					skill2 = document.getElementById('skill2'),
					skill3 = document.getElementById('skill3'),
					skill4 = document.getElementById('skill4'),
					skill5 = document.getElementById('skill5'),
					skill6 = document.getElementById('skill6'),
					skill7 = document.getElementById('skill7'),
					skill8 = document.getElementById('skill8'),
					skill9 = document.getElementById('skill9'),
					skill10 = document.getElementById('skill10'),
					skill11 = document.getElementById('skill11'),
					skill12 = document.getElementById('skill12');
			
          			var summe1 = skill1.valueAsNumber / 28 * 5;
				    summe1 = summe1.toFixed(3);
				    document.getElementById('betrag1')
					.value = summe1;
	

					var summe2 = skill2.valueAsNumber / 28 * 5;
					summe2 = summe2.toFixed(3);
				    document.getElementById('betrag2')
					.value = summe2;
					
					var summe3 = skill3.valueAsNumber / 28 * 4;
					summe3 = summe3.toFixed(3);
				    document.getElementById('betrag3')
					.value = summe3;
					
					var summe4 = skill4.valueAsNumber / 28 * 3;
					summe4 = summe4.toFixed(3);
				    document.getElementById('betrag4')
					.value = summe4;
					
					var summe5 = skill5.valueAsNumber / 28 * 2;
					summe5 = summe5.toFixed(3);
				    document.getElementById('betrag5')
					.value = summe5;
					
					var summe6 = skill6.valueAsNumber / 28 * 1;
					summe6 = summe6.toFixed(3);
				    document.getElementById('betrag6')
					.value = summe6;
					
					var summe7 = skill7.valueAsNumber / 28 * 1;
					summe7 = summe7.toFixed(3);
				    document.getElementById('betrag7')
					.value = summe7;
					
					var summe8 = skill8.valueAsNumber / 28 * 1;
					summe8 = summe8.toFixed(3);
				    document.getElementById('betrag8')
					.value = summe8;
				
				    var summe9 = skill9.valueAsNumber / 28 * 1;
					summe9 = summe9.toFixed(3);
				    document.getElementById('betrag9')
					.value = summe9;
					
					var summe10 = skill10.valueAsNumber / 28 * 1;
					summe10 = summe10.toFixed(3);
				    document.getElementById('betrag10')
					.value = summe10;
					
					var summe11 = skill11.valueAsNumber / 28 * 1;
					summe11 = summe11.toFixed(3);
				    document.getElementById('betrag11')
					.value = summe11;
				
				    var summe12 = skill12.valueAsNumber / 28 * 1;
					summe12 = summe12.toFixed(3);
				    document.getElementById('betrag12')
					.value = summe12;
			
		
	var gesamt = skill1.valueAsNumber / 28 * 5 + skill2.valueAsNumber / 28 * 5 + skill3.valueAsNumber / 28 * 4 + skill4.valueAsNumber / 28 * 3 + skill5.valueAsNumber / 28 * 2 + skill6.valueAsNumber / 28 * 1 + skill7.valueAsNumber / 28 * 1 + skill8.valueAsNumber / 28 * 1 + skill9.valueAsNumber + skill10.valueAsNumber / 28 * 1 + skill11.valueAsNumber / 28 * 1 + skill12.valueAsNumber / 28 * 1
	gesamt = gesamt.toFixed(2);
		document.getElementById('gesamt')
			.value = gesamt;
			 
			}
			document.getElementById("TWRechner")
				.addEventListener("input", rechne);

		});
		//]]>
	</script>
	</table>
</body>

</html>

Die Fehlerkonsole sagt: Uncaught ReferenceError: $ is not defined

Edit: unter jsfiddle macht er es, aber dann rechnet er nicht mehr: Edit fiddle - JSFiddle

- - - Aktualisiert - - -

Musste erst jQuery mit einbinden, jetzt klappt es!

[GELÖST] Auswahlmenü - HTML Code laden

mot96

New member

mot96

New member

kkapsner

Super Moderator

mot96

New member