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

[FRAGE] Function richtig eingebunden oder stimmt der Code nicht?

E

easttrain

New member
Hallo zusammen

Ich bin noch ein absoluter Frischling was Javascript betrifft.
Nun habe ich ein Frage zu einem Script bzw. auch Website.

Das Script sieht folgendermassen aus:

Code: 
function bhf_tool() {
	var eingabe_bhf = document.getElementById("eingabe_bhf");
	var box = document.getElementById("resultat_bhf");
		if (eingabe_bhf==Aadorf){
			resultat_bhf="AD";
		}else if(eingabe_bhf==Aarau){
			resultat_bhf="AA";
		else{
			resultat_bhf = "Ungültige Eingabe";
	}box.innerHTML = resultat_bhf
}

HTML: 
<!DOCTYPE html>
<html>
	<head>
	<meta charset="ANSI">
	<div id="seite">
	<h1>Schweizer Zugnummern- und Bahnhofstool</h1>
	<img id="logo" src="logo.png">
	<p>Ein Tool zur Bestimmung von Zugnummern sowie zum herausfinden welches Bahnhofskürzel welchem Bahnhof entspricht, bzw. welcher Bahnhof welches Kürzel besitzt.</p> 
	<p>Schweizer Zugnummern können z.b. via "Rail4" bezogen werden.</p>
	<title>Zugnummern- und Bahnhofstool Schweiz</title
	</div>
		<link rel="stylesheet" href="style_zntool.css">
	</head>
<body>
<div id="Inhalt">
	<p1>Achtung: Dieses Tool kann nur mit Schweizer Zugnummern und Bahnhöfen verwendet werden!</p1>
<br/>
<br/>
	<p2>Zugnummern</p2>
	<br/>
	<input id="eingabe_zn"></input>
	<button onclick="./zn_tool()">suchen</button>
	<div id="resultat_zn"></div>
	<script src = "./zntoolscript.js" ></script>
<br/>
<br/>
<br/>
	<p2>Bahnhöfe</p2>
	<br/>
	<p6>(Entweder Bahnhof oder Kürzel eingeben)</p6>
	<br/>
	<p4>Nur Ortschaft bzw. Stationsnamen eingeben, z.b. "Zürich HB Löwenstrasse", "Zürich Hardbrücke" oder "Erstfeld".</p4>
	<br/>
	<p5>Auf korrekte Schreibweise achten!</p5>
	<br/>
	<input id="eingabe_bhf"></input>
	<button onclick="./bhf_tool()">suchen</button>
	<div id="resultat_bhf"></div>
	<script src = "./bhftoolscript.js" ></script>
<br/>
<br/>
	<p99>Aktuelle Version: </p99>
	<br/>
	<p991>1.0</p991>
	<br/>
	<p99>Changelog:</p99>
	<br/>
	<p99>Verison 1.0: Release (x.x.2017)</p99>
<br/>
<div/>
<div id="fusszeile">
	<p>Bei jeglichen Problemen, Fehlern oder sonstigem Feedback bitte eine E-mail senden an:
	<a href="mailto:easttrain@gmx.chcom?Subject=Rückmeldung Zugnummern- und Bahnhofstool" target="_top">easttrain@gmx.ch</a>
	</p>
	<p>Meine Website:<a href="http://www.easttrain.jimdo.com/" target="_blank">easttrain.jidmo.com</a></p>
	<p44>Ich übernehme keine Haftung für jegliche Fehlerhafte Informationen sowie Schäden an Soft- und Hardware des Benutzers.</p44>
	<br/>
	<p45>Zugnummern- und Bahnhofstool Schweiz 2017: Thomas Schnyder</p45>
<div/>
<div/>
</body>
</html>
<!---
©Schweizer Zugnummern- und Bahnhoftstool ZBT 2017: Thomas Schnyder
Email: easttrain@gmx.ch
Website: easttrain.jimdo.com
--->

Natürlich ist der Javascript code noch lange nicht fertig, das fehlen noch tausende von Bahnhöfen :p

Nun aber zur Frage: Habe ich das Script bzw. die Function richtig eingebunden bzw. geschrieben? Wenn ich die Website ausführe passiert nichts, wenn ich etwas ins Input-Feld "Bahnhöfe" schreibe.

Ich hoffe, jemand kann mir helfen.

Mit freundlichen Grüssen,
easttrain
 
Zuerst solltest du in die Fehlerkonsole schauen - da sollte etwas erscheinen, wenn du auf den Button klickst (bei der Eingabe selbst passiert ja erst einmal noch nichts). Die soltest du zuerst bereinigen.

Dann hast du noch einen Zugriffsfehler: mit document.getElementById() bekommst du eine Node - wenn du das eingegebene in ein <input> dann noch haben willst, musst du mit .value darauf zugreifen.

PS: Die ganzen Bahnhöfen so hart in den JS-Code reinzuschreiben ist keine gute Idee. Macht den Code unleserlich und schwer wartbar. Speicher die Zuordnungen besser in einer Datenstruktur. Trennung von Daten und Funktionalität ist immer eine gute Idee.
 
Okay, vielen Dank für deine rasche und hilfreiche Antwort, @kkapsner

Ich werde deine Tipps sobald als möglich probieren umzusetzten.

Mit freundlichen Grüssen,
easttrain
 
Hallo zusammen.

Momentan komme ich immer noch nicht weiter.

Die beiden Scripts sehen nun folgendermassen aus:

HTML:
HTML: 
br/>
	<p2>Bahnhöfe</p2>
	<br/>
	<p6>(Entweder Bahnhof oder Kürzel eingeben)</p6>
	<br/>
	<p4>Nur Ortschaft bzw. Stationsnamen eingeben, z.b. "Zürich HB Löwenstrasse", "Zürich Hardbrücke" oder "Erstfeld".</p4>
	<br/>
	<p5>Auf korrekte Schreibweise achten!</p5>
	<br/>
	<input id="eingabe_bhf"></input>
	<button onclick="function bhf_tool()">suchen</button>
	<div id="resultat_bhf"></div>
	<script src="./bhftoolscript.js"></script>
<br/>
(Ist extra gekürzt)

JS:
Code: 
function bhf_tool(){
	var eingabe_bhf = document.getElementById("eingabe_bhf").value;
	var bhfg = ["Aarau","Aadorf"]
	var bhgk = ["AA","AD"]
		switch(eingabe_bhf){
			case bhfg == [0]:
				resultat_bhf = bhfk = [0];
				break;
			case bhfg == [1]:
				resultat_bhf = bhfk = [1];
				break;
			default:
				resultat_bhf = ("Ungültige Eingabe");
			}innerHTML = resultat_bhf
}
Ich hab den ganzen JS Code der einfachheit halber in einen Switch gepackt. Ausserdem habe ich, wie von Kkapsner empfohlen, die Daten in einen Array geschrieben.

Nun zu meinem Problem:
Die Fehlerkonsole zeigt, wenn ich auf "suchen" klicke, folgende Mekdung an:
"index_zugnummerntool.html:38 Uncaught SyntaxError: Unexpected token }"
(Zeile 38 entspricht hier Zeile 12)

Bezieht sich diese Meldung nun auf den JS Code, denn im HTML steht ja schliesslich kein "}"

Ich hoffe, ihr könnt mir hier weiterhelfen.

MfG,
easttrain
 
Ersteinmal habe ich ein paar Fragen zu deinem Code (weitere Probleme):
- Was sind <p2>, <p6>, <p4>, <p5>? Meinst du <h2>, <h6>, ... oder verwendest du XML, und warum?
- deine Funktion wird so nicht funktionieren. In der Switch schreibst du bhfg==[0]. bhfg ist ["AA","AB"], und das ist nicht gleich 0, also ist dieser case false. Genauso ist es mit allen weiteren cases. Also wird, wenn die Eingabe keinen falschen Wert hat, immer der default:-Zweig ausgeführt. Was wilst du also erreichen?
- Am Ende setzt du eine Variable innerHTML. Diese ist nirgendwo vorher definiert, also global. Hast du nur ein Element davor vergessen, oder benötigst du wirklich eine globale Variable dafür?

Jetzt zu deinem eigentlichen Problem:
- <button onclick="function bhf_tool()">suchen</button> soll garantiert die Funktion bhf_tool() aufrufen, oder? Entferne mal das function davor. Das Schlüsselwort function wird nur benötigt, wenn eine Funktion deklariert werden soll. Es darf nicht notiert werden, wenn die Funktion nur aufgerufen werden soll. Den Funktionsaufruf kennzeichnen schon die runden Klammern.

- - - Aktualisiert - - -

Du könntest deinen Code viel einfacher mit Objekten haben. Hier ein Beispiel, wie ich es machen würde:
Code: 
function bhf_tool(){
  document.getElementById("resultat_div")= {
    "Aarau":"AA",
    "Aadorf":"AD"
  }[document.getElementById("eingabe_bhf").value] || "Ungültige Eingabe";
}
 
Statt case bhfg == [0]: prüfst du den ersten Array-Eintrag so case bhfg[0]:

Die Zuweisung erfolgt dann logischerweise so resultat_bhf = bhfk[0];

Und die Klammern bei dem default: sind überflüssig: resultat_bhf = "Ungültige Eingabe";
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben