• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Auswahlmenü - HTML Code laden

mot96

New member
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:

rechnertlubf.png


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>
 
Zuletzt bearbeitet von einem Moderator:
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?
 
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!
 
Zuletzt bearbeitet:
Zurück
Oben