[FRAGE] Dropdown mit JS auslesen, weiterverarbeiten und ausgeben! (Function nicht definiert)

ITFlori · 15. Nov. 2016

Dropdown mit JS auslesen, weiterverarbeiten und ausgeben! (Berechnung in JS)

Hallo zusammen,

Ich habe mal eine Frage ... Ich hänge jetzt seit mehreren Tagen an meinem Problem und habe schon sehr viel mit Google gearbeitet in der letzten Zeit

Ausgangsituation:
Ich habe ein Dropdown Feld .. von diesem DropDown will ich mit JS die Ausgewählte Option auslesen und mit dieser dann weiterarbeiten.

Was soll passieren?
Sobald man im DropDown "Nein" auswählt soll auf eine Variable +6 gerechnet werden und der Benutzer sollte dann BI: 6 ausgegeben bekommen.

Was funktioniert nicht?
1. Die IE Konsole zeigt mir an das ich die Funktion "Test" nicht definiert habe obwohl ich das ganz unten wo alle Scripts stehen getan haben! Muss ich das woanders Hinschreiben? Ich will den Code irgendwann in eine Extra Datei auslagern ist das nicht möglich?
2. Mit document.write ändert sich die Zahl nicht ... gibts da eine Alternative? (zum aktuellen Stand noch nicht eingefügt .... mache ich Später -> Erstmal Fehler 1 weg)

HTML Code: Nicht wundern .. die Datei hat ein paar Zeilen es wird zum Schluss alles geschlossen

Code:

	<div class="content animate-panel">

		<div class="Row2">
			<div class="col-lg-12">
				<div class="hpanel hyellow">
					<div class="panel-heading">
						<div class="panel-tools">
							<span class="badge badge-warning">BI:  //Ausgabe hier: zum aktuellen Stand noch nicht eingefügt .... mache ich Später -> Erstmal Fehler 1 weg </span>
							<a class="showhide"><i class="fa fa-chevron-up"></i></a>
						</div>
						<h3>1. Allgemein</h3>
					</div>
					<div class="panel-body">
						<form name="Formular_1" class="form-horizontal" method="post">
							<div class="form-group">
								<label class="col-sm-6 controle-label">
									Erfüllt das Bauteil und / oder das Befestigungselement seine Funktion ohne Probleme? <br>
									
								</label>
								<div class="col-sm-2">
									<select name="Auswahl111" id="Auswahl111" class="form-control m-b" onchange="Test(this.id)">
										<option value="Auswahl">Auswahl</option>
										<option value="Ja">Ja</option>
										<option value="Nein">Nein</option>
										<option value="n.r.">n.r.</option>
									</select>
								</div>

JS:

Code:

<script> 

var erg_1 = "0";
var erg_2 = "0",
var erg_3 = "0";
var erg_4 = "0";
var end_erg = "0";
var test = "10";

function Test(Auswahl111,Auswahl121){
	var Auswahl111 = document.getElementById(Auswahl111);
	var Auswahl121 = document.getElementById(Auswahl121);
	
	if(Auswahl111.value == "Nein"){
		var rech_1 = "0";
		rech_1 = erg_1 + 6;
		}
}

</script>

An sich müsste er doch diese Funktion erkennen oder nicht?

tsseh · 15. Nov. 2016

ITFlori schrieb:
1. Die IE Konsole zeigt mir an das ich die Funktion "Test" nicht definiert habe obwohl ich das ganz unten wo alle Scripts stehen getan haben! Muss ich das woanders Hinschreiben? Ich will den Code irgendwann in eine Extra Datei auslagern ist das nicht möglich?

so wie du es beschreibst sollte es gehen

ITFlori schrieb:
2. Mit document.write ändert sich die Zahl nicht ... gibts da eine Alternative? (zum aktuellen Stand noch nicht eingefügt .... mache ich Später -> Erstmal Fehler 1 weg)

innerHTML
document.write funktioniert nur in einem noch nicht fertig geparsten document, da es den output an die stelle schreibt, an welcher der parser gerade angelangt ist.
in einem eventhandler ist das document (fast) immer schon abgeschlossen und dann macht document.write ein neues auf.

ITFlori · 15. Nov. 2016

tsseh schrieb:
so wie du es beschreibst sollte es gehen

Dachte ich mir auch aber:

//das ist ein Bild ^^

Und danke mit dem Tip zu InnerHTML ... beschäftige mich mal damit

Gruß
Flo

tsseh · 15. Nov. 2016

dast ist ein kleines beispiel und viel besser als ein bild was nichts sagt was du nicht schon gesagt hast

Code:

<!doctype html>
<html>
<head>
  <title></title>
</head>
<body>
  <select onchange="test()">
    <option value="xxx">xxx</option>
    <option value="yyy">yyy</option>
  </select>
</div>
  <script>
    function test()
    {
      alert("alles ok");
    }
  </script>
</body>
</html>

ITFlori · 15. Nov. 2016

mhhh habe jetzt mal eine ältere Version geladen und die Ausgabe eingebaut jetzt funktioniert das alles .. wunderbar und danke für die hilfe vor allem für den Tipp mit InnerHTML

Hier der funktionierende Code:
HTML: Wie gesagt Dokument ist etwas Länger ... ich habe zum schluss alles geschlossen!

Code:

<div class="content animate-panel">

		<div class="Row2">
			<div class="col-lg-12">
				<div class="hpanel hyellow">
					<div class="panel-heading">
						<div class="panel-tools">
							<span id="Bi_1" class="badge badge-warning">BI:  </span>
							<a class="showhide"><i class="fa fa-chevron-up"></i></a>
						</div>
						<h3>1. Allgemein</h3>
					</div>
					<div class="panel-body">
						<form name="Formular_1" class="form-horizontal" method="post">
							<div class="form-group">
								<label class="col-sm-6 controle-label">
									Erfüllt das Bauteil und / oder das Befestigungselement seine Funktion ohne Probleme? <br>
									
								</label>
								<div class="col-sm-2">
									<select name="Auswahl111" id="Auswahl111" class="form-control m-b" onchange="Test(this.id)">
										<option value="Auswahl">Auswahl</option>
										<option value="Ja">Ja</option>
										<option value="Nein">Nein</option>
										<option value="n.r.">n.r.</option>
									</select>
								</div>

JS:

Code:

<script> 

var erg_1 = "0";
var erg_2 = "0";
var erg_3 = "0";
var erg_4 = "0";
var end_erg = "0";
var test = "10";
var text = document.getElementById("Bi_1").textContent;

function Test(Auswahl111,Auswahl121){
	var Auswahl111 = document.getElementById(Auswahl111);
	var Auswahl121 = document.getElementById(Auswahl121);
	
	if(Auswahl111.value == "Nein"){
		var rech_1 = "0";
		erg_1 = rech_1 + 6;
		document.getElementById("Bi_1").textContent = erg_1;
		}

Habe mich wohl irgendwo vertippt :O

Gruß Flo

ITFlori · 17. Nov. 2016

Hallo nochmal,

ich bin jetzt im zuge dessen auf ein weiteres Probem gestoßen. Das Übertragen und einfügen der Daten funktioniert jetzt soweit. Jetzt habe ich in meinen JS code noch ein bisschen was eingefügt, damit mein Wert berchnet werde kann .. dass funktioniert auch soweit nur:

Was soll passieren:
Ich habe 6 Dropdown Felder Wenn ich bei dem 1. Nein auswähle soll JS die var rech_1 mit + 6 rechnen; Wenn ich bei der 2. Nein auswähle, dann die Variable mit + 4 Rechnen und bei den anderen auch jeweils anders. Nun Rechnet der mir aber bei allen 6 Dropdown feldern +6 sobald ich Nein auswähle ....

hier mein Code:

Code:

var erg_1 = 0;
var erg_2 = 0;
var erg_3 = 0;
var erg_4 = 0;
var end_erg = 0;
var Ja = 0;
var text = document.getElementById("Bi_1").textContent;

function berechnen_1(Auswahl111,Auswahl121,Auswahl131,Auswahl141,Auswahl151,Auswahl161){
	var Auswahl111 = document.getElementById(Auswahl111);
	var Auswahl121 = document.getElementById(Auswahl121);
	var Auswahl131 = document.getElementById(Auswahl131);
	var Auswahl141 = document.getElementById(Auswahl141);
	var Auswahl151 = document.getElementById(Auswahl151);	
	var Auswahl161 = document.getElementById(Auswahl161);
	
	if(Auswahl111.value == "Nein"){
		var rech_1 = "0";
		erg_1 = erg_1 + 6;
		document.getElementById("Bi_1").textContent = "BI: " + erg_1;
		};
	if(Auswahl121.value == "Nein"){
		erg_1 = erg_1 + 4;
		document.getElementById("Bi_1").textContent = "BI: " + erg_1;
		};
	if(Auswahl131.value == "Nein"){
		erg_1 = erg_1 + 3;
		document.getElementById("Bi_1").textContent = "BI: " + erg_1;
		};
	if(Auswahl141.value == "Nein"){
		erg_1 = erg_1 + 4;
		document.getElementById("Bi_1").textContent = "BI: " + erg_1;
		};
	if(Auswahl151.value == "Nein"){
		erg_1 = erg_1 + 5;
		document.getElementById("Bi_1").textContent = "BI: " + erg_1;
		};
	if(Auswahl161.value == "Nein"){
		erg_1 = erg_1 + 3;
		document.getElementById("Bi_1").textContent = "BI: " + erg_1;
		};
	};

was mache ich Falsch? Müsste doch normalerweiße funktionieren oder?

Danke für euere Hilfe!
Gruß Flo!

tsseh · 17. Nov. 2016

ITFlori schrieb:
Nun Rechnet der mir aber bei allen 6 Dropdown feldern +6 sobald ich Nein auswähle ....

wenn du wo nein auswählst?
dein beispiel rechnet für jedes select welches "nein" gewählt hat irgendeinen wert dazu. hast du die 1. beiden auf nein, also + 10

ITFlori · 17. Nov. 2016

tsseh schrieb:
dein beispiel rechnet für jedes select welches "nein" gewählt hat irgendeinen wert dazu. hast du die 1. beiden auf nein, also + 10

Ja genau das sollte da da stehen. Er rechnet aber + 12 aus warum? :O

tsseh · 17. Nov. 2016

weil du den 1., den 3. und den 6. auf nein hast, oder den 4., den 5. und den 6. oder oder oder

ITFlori · 17. Nov. 2016

2016-11-17 14_00_31-Prozess BI - Internet Explorer.jpg

Wie du siehst ... ist das nicht der fall muss also am Code irgendwas sein ... Ich weiß aber leider nicht was :O

tsseh · 17. Nov. 2016

dann ist erg_1 vorher 2 oder es ist noch was anderes

ITFlori · 17. Nov. 2016

ITFlori schrieb:

Code:

var erg_1 = 0;
var erg_2 = 0;
var erg_3 = 0;
var erg_4 = 0;
var end_erg = 0;
var text = document.getElementById("Bi_1").textContent;

function berechnen_1(Auswahl111,Auswahl121,Auswahl131,Auswahl141,Auswahl151,Auswahl161){
	var Auswahl111 = document.getElementById(Auswahl111);
	var Auswahl121 = document.getElementById(Auswahl121);
	var Auswahl131 = document.getElementById(Auswahl131);
	var Auswahl141 = document.getElementById(Auswahl141);
	var Auswahl151 = document.getElementById(Auswahl151);	
	var Auswahl161 = document.getElementById(Auswahl161);
	
	if(Auswahl111.value == "Nein"){
		var rech_1 = "0";
		erg_1 = erg_1 + 6;
		document.getElementById("Bi_1").textContent = "BI: " + erg_1;
		};
	if(Auswahl121.value == "Nein"){
		erg_1 = erg_1 + 4;
		document.getElementById("Bi_1").textContent = "BI: " + erg_1;
		};

Es muss was anderes sein, da ich ja die Variable auf 0 gesetzt habe ... nach deiner Theorie müsste ja wenn ich NUR das erste auf "Nein" setzte ja 8 raus kommen .... Es kommt aber 6 Raus das ist noch richtig ...

tsseh · 17. Nov. 2016

ITFlori schrieb:
Es muss was anderes sein, da ich ja die Variable auf 0 gesetzt habe ...

ok, rate ich weiter: die strings Auswahl111 - Auswahl161 enthalten falsche id's

ITFlori schrieb:
nach deiner Theorie müsste ja wenn ich NUR das erste auf "Nein" setzte ja 8 raus kommen .... Es kommt aber 6 Raus das ist noch richtig ...

nein, da es eine globale variable ist, die du z.b. bei jedem aufruf von deiner funktion änderst, kann beim 1 mal 6 rauskommen. jenachdem was du dann mit der variablen machst, kann sie beim nächsten mal 2 sein und 12 rauskommen.

ITFlori · 18. Nov. 2016

Danke für deinen Tipp mit den globalen Variablen .... habe den Fehler jetzt gefunden. Ich muss jedes DropDown Auswahlfeld eine eigene Funktion zuweisen:
Hier ein Teil des funktionierenden Codes:

Code:

var erg_1 = 0;
var erg_2 = 0;
var erg_3 = 0;
var erg_4 = 0;
var end_erg = 0;
var Ja = 0;
var text = document.getElementById("Bi_1").textContent;

function berechnen_1(Auswahl111){
	var Auswahl111 = document.getElementById(Auswahl111);
if(Auswahl111.value == "Nein"){
		var rech_1 = "0";
		erg_1 = erg_1 + 6;
		document.getElementById("Bi_1").textContent = "BI: " + erg_1;
		};
}
function berechnen_2(Auswahl121){
		var Auswahl121 = document.getElementById(Auswahl121);
	if(Auswahl121.value == "Nein"){
		erg_1 = erg_1 + 4;
		document.getElementById("Bi_1").textContent = "BI: " + erg_1;
		};
}

Danke nochmal für die Hilfe -> tsseh !

kkapsner · 18. Nov. 2016

Warum arbeitest du da überhaupt mit einer globalen Variable? Und für jedes Feld eine eigenen Funktion zu machen klingt für mich nach keiner guten Idee.

ITFlori · 18. Nov. 2016

Ich arbeite mit einer Globalen Variable, da ich das ergebnis noch brauche ... Ich muss das Ergebnis vergleichen wenn das ergebnis 0 ist soll in "BI_1" = BI: 8 stehen wenn die Zahl unter 5 ist BI: 7 usw. Darum muss es eine Globale variable sein ... Ich und alles in eine einzelne Funktion war das einzige was eben bei mir funktioniert hat :O

kkapsner · 19. Nov. 2016

Wenn du das Ergebnis einer Funktion später noch brauchst, solltest du diesen Wert von der Funktion zurückgeben lassen. Durch die globale Variable sind die Ergebnisse deiner Funktionsaufrufe nicht unabhängig. Probier' einfach mal folgendes Beispiel auf, dann siehst du den Unterschied:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript">
var c = 0;
function globalCheck(sel){
	if (sel.value === "nein"){
		c += 1;
	}
}
function globalOutput(){
	document.getElementById("globalOutput").textContent = "erg: " + c;
}

function localFunc(sel){
	var c = 0;
	if (sel.value === "nein"){
		c += 1;
	}
	return c;
}
function localOutput(sel){
	document.getElementById("localOutput").textContent = "erg: " + localFunc(sel);
}
</script>
<style type="text/css"></style>
</head>
<body>
Ein paar mal zwischen ja und nein wechseln!
<h1>globale Variable</h1>
<span id="globalOutput"></span>
<select onchange="globalCheck(this);globalOutput()">
	<option>ja</option>
	<option>nein</option>
</select>
<h1>lokale Variable</h1>
<span id="localOutput"></span>
<select onchange="localOutput(this)">
	<option>ja</option>
	<option>nein</option>
</select>
</body>
</html>

ITFlori · 24. Nov. 2016

mhhh ...also dein Code funktioniert bei mir gut, sobald ich aber mein JS so umschreibe wie du das hast also nur eine Ausgabefunktion habe funktioniert das bei mir nicht mehr ... komisch weiß auch nicht warum :O

kkapsner · 24. Nov. 2016

ITFlori schrieb:
komisch weiß auch nicht warum

Zeig' doch mal, was du probiert hast.

ITFlori · 24. Nov. 2016

Hier:
HTML:

Code:

		<div class="Row2">
			<div class="col-lg-12">
				<div class="hpanel hyellow">
					<div class="panel-heading">
						<div class="panel-tools">
							<span id="Bi_1" class="badge badge-warning">BI: 0 </span>
							<a class="showhide"><i class="fa fa-chevron-up"></i></a>
						</div>
						<h3>1. Allgemein</h3>
					</div>
					<div class="panel-body">
						<form name="Formular_1" class="form-horizontal" method="post">
							<div class="form-group">
								<label class="col-sm-6 controle-label">
									Erfüllt das Bauteil und / oder das Befestigungselement seine Funktion ohne Probleme? <br>
									
								</label>
								<div class="col-sm-2">
									<select name="Auswahl111" id="Auswahl111" class="form-control m-b" onchange="berechnen_11(this.id);globalAusgabe;bi">
										<option value="Auswahl">Auswahl</option>
										<option value="Ja">Ja</option>
										<option value="Nein">Nein</option>
										<option value="n.r.">n.r.</option>
									</select>
								</div>
								<div class="col-sm-4">
									<input name="Bemerkung112" id="112" class="form-control" type="text" placeholder="Bemerkung">
									</input>
								</div>
								<div class="hr-line-dashed">
								</div>
								<label class="col-sm-6 controle-label">
									Eine Prozessänderung würde zu keiner Verbesserung des Montageprozesses führen?
								</label>
								<div class="col-sm-2">
									<select name="Auswahl121" id="Auswahl121" class="form-control m-b" onchange="berechnen_12(this.id);globalAusgabe;bi">
										<option value="Auswahl">Auswahl</option>
										<option value="Ja">Ja</option>
										<option value="Nein">Nein</option>
										<option value="n. r.">n. r.</option>
									</select>
								</div>

JS:

Code:

var erg_1 = 0;
var erg_2 = 0;
var erg_3 = 0;
var erg_4 = 0;
var end_erg = 0;
var text = document.getElementById("Bi_1").textContent;

function berechnen_11(Auswahl111){
	var Auswahl111 = document.getElementById(Auswahl111);
if(Auswahl111.value == "Nein"){
		erg_1 += 6;
		};
}
function berechnen_12(Auswahl121){
		var Auswahl121 = document.getElementById(Auswahl121);
	if(Auswahl121.value == "Nein"){
		erg_1 += 4;
		};
}

function globalAusgabe(){
	document.getElementById("Bi_1").textContent = "BI: " + erg_1;

[FRAGE] Dropdown mit JS auslesen, weiterverarbeiten und ausgeben! (Function nicht definiert)

New member

Lounge-Member

New member

Lounge-Member

New member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Super Moderator

New member

Super Moderator

New member

Super Moderator

New member