[GELÖST] Benutzereingabe wird nicht korrekt angenommen

tklustig · 16. Sep. 2016

Hi Leute,
habe ein kurzes JScript geschrieben,welches nach einer Benutzereingabe Primzahlen berechnet. Bedauerlicherweise wird die Benutzereingabe nicht entgegengenommen. Eine statische Primzahlen-Berechnung funktioniert hingegen.
Der Bug muss also in der Formular-Programmierung liegen. Nur wo?
Danke für jedwelche Tipps.....

P.S.: Habe diese Frage vor 3 Tagen in einem anderen Forum bereits gepostet, bekam allerdings kein feedback.
hoffe also, dass dieser thread nicht aufgrund crossposting geschlossen wird.
Denke ma', 3 Tage ohne Antwort dürften reichen, um die Problematik in einem anderen Forum zu posten

HTML:

<!Doctype html> <!-- Definition des doctype-Modus -->
<html> <!-- Definition des Stammverzeichnises -->
 
<head> <!-- Definition des Kopfbereiches -->
    <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
    <title> HTML-Skelett </title> <!-- weist dem HTML-Dokument in der Registerkarte einen Namen zu -->
 
</head>
<style>
body {
 background-color:lightgreen;
 font-family:Times New Roman;
 font-size:30px;
 color:blue;
 }
 </style>
 
<body> <!-- Definition des Bodybereiches -->
<h1> Primzahlen </h1>
<form name="eingabe">
Bitte n eingeben: <input type="text" id="wert" size="10"><br>
</form>
<script language="JavaScript">
function finden(number){
for(var i=1,feld=[];i<=number;i++){
if(!(number%i)){
feld[feld.length]=i;
}
}
return feld;
}
function isprim(number){
return finden(number).length===2;
}
function findprim(number){
for(var i=1,feld=[];i<=number;i++){
if (isprim(i)){
feld[feld.length]=i;
document.write(+i+",");
}
}
return feld;
}
//findprim(100);
var wert = document.getElementById("wert").value;
findprim(wert);
 
</script>
</body>
</html>

tsseh · 16. Sep. 2016

du rufst deine funktion ja auch gleich auf, wenn die seite geöffnet wird, da hat noch niemand was eingegeben.
https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onchange
wenn du kein submitbutton hast, brauchst du auch kein formular, sonst https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onsubmit

tklustig · 16. Sep. 2016

Mit einem Submitbutton klapp das ganze erst recht nicht, da bei einem Aufruf durch

HTML:

<input type="submit" value="Zählen" title="primzahlen"onclick="findprim()" /> <br><br>

sämtliche CSS-Formatierungen vernichtet werden. Keine Ahnung,warum

du rufst deine funktion ja auch gleich auf, wenn die seite geöffnet wird, da hat noch niemand was eingegeben.

Häh?
Erst wird doch innerhalb des Formulars die id definiert.
Wenn ich die Funktion mittels onclick aufrufe, ändert sich auch nix

:icon8:
Schlimmer noch:
Die Funktion wird überhaupt nicht aufgerufen durch

HTML:

<input type="submit" value="Zählen" title="primzahlen"onclick="findprim(wert)" /> <br><br>

und wenn ich die Funktion statisch aufrufe, also mittels

HTML:

<input type="submit" value="Zählen" title="primzahlen"onclick="findprim(100)" /> <br><br>

werden die Primzahlen ohne CSS-Formatierungen in einem neuen Fenster ausgegeben....

mikdoe · 17. Sep. 2016

Hallo tklustig! Willkommen!
Bitte rücke den Quellcode erstmal ein, damit man das lesen kann.

Und wenn du kein Formular absenden sondern eine Funktion feuern willst verwende kein type=submit sondern type=button.

andreax · 17. Sep. 2016

Du brauchst kein form tag wenn du Inhalte oder Ergebnisse im selben Dokument ausgeben willst.
In neuen Browsern brauchst du nicht mal ein Input-Feld echt
Bevor du dein Keyboard zertrümmerst

hier ein Vorschlag wie du es angehen könntest.

HTML:

<!Doctype html> 
<html> 
 
<head>
    <meta charset="utf-8"> 
    <title> HTML-Skelett </title> 
 
</head>
<style>
body {
 background-color:lightgreen;
 font-family:Times New Roman;
 font-size:30px;
 color:blue;
 }
 #ausgabe
 {
	list-style:circle;
	font-size:50%;
	width:350px;
	column-count:4;
 }

 </style>
 
<body> 
<h1> Primzahlen </h1>
<label>
Bitte n eingeben: <input type="text" id="primal" size="10"><br>
</label>

<div id="ausgabe"> </div>
<script>

function finden(number)
{
	for(var i=1,feld=[];i<=number;i++)
	{
	if(!(number%i)){
	feld.push(i);
	}
}
	return feld;
}
function isprim(number)
{
	return finden(number).length===2;
}

function findprim(number)
{
	for(var i=1,feld=[];i<=number;i++)
	{
		if (isprim(i))
		{
		feld.push(i);
		}
	}
		return feld;
}

var prima = document.getElementById("primal");
prima.addEventListener('input',primeOut,false);

function primeOut()
{
	var aus = document.getElementById('ausgabe');
             aus.innerHTML = "";
              if(this.value >= 30000){alert("das wird aber eine Weile dauern!");}
              if(this.value >= 100000){alert("die Zahl ist zu hoch");	 this.value=""; return;}
	
	var pza = findprim(this.value);
	var i = "";
		for( i in pza)
		{
		var prm = document.createElement('li');
		prm.textContent = pza[i];
		aus.appendChild(prm);
		}
}


 
</script>
</body>
</html>

tklustig · 17. Sep. 2016

Oh, dieser Code ist aber elegant. Eröffnet mir eine völlig neue Vorgehensweise für künftige Projekte.Vielen Dank dafür. Würde folglich diesen thread als erfolgreich abschließen,frage mich aber immer noch,was an MEINEM Code nicht stimmt;
warum zum Henker wird die Funktion nicht aufgerufen.
Ob ich den type=submit oder type=button setze macht keinerlei Unterschied.
die Zuweisung der Benutzereingabe mittels id funktioniert einfach nicht. Schon die Anweisung

Code:

 document.getElementById("wert").focus();

wird nicht ausgeführt.
Quasi der erste Hinweis, dass die id nicht verarbeitet wird, obwohl sie doch mittels

Code:

 Bitte n eingeben: <input type="text" id="wert" size="10">

explizit
definiert wurde. Was mache ich nur falsch

Hier nochmals der vollständige Quellcode,diesesmal hoffentlich korrekt formatiert

HTML:

<!Doctype html> <!-- Definition des doctype-Modus -->
<html> <!-- Definition des Stammverzeichnises -->

<head> <!-- Definition des Kopfbereiches -->
    <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
    <title> HTML-Skelett </title> <!-- weist dem HTML-Dokument in der Registerkarte einen Namen zu -->

</head>
<style>
body {
 background-color:lightgreen;
 font-family:Times New Roman;
 font-size:30px;
 color:blue;
 }
 </style>

<body> <!-- Definition des Bodybereiches -->
<h1> Primzahlen </h1>
<script>
<!Doctype html> <!-- Definition des doctype-Modus -->
<html> <!-- Definition des Stammverzeichnises -->

<head> <!-- Definition des Kopfbereiches -->
    <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
    <title> HTML-Skelett </title> <!-- weist dem HTML-Dokument in der Registerkarte einen Namen zu -->

</head>
<style>
body {
 background-color:lightgreen;
 font-family:Times New Roman;
 font-size:30px;
 color:blue;
 }
 </style>

<body> <!-- Definition des Bodybereiches -->
<h1> Primzahlen </h1>
<script language="JavaScript">
 document.getElementById("wert").focus();

function finden(number)
{
	for(var i=1,feld=[];i<=number;i++)
{
		if(!(number%i))
{
		feld[feld.length]=i;
}
}
return feld;
}

function isprim(number)
{
return finden(number).length===2;
}

function findprim(number)
{
var i,wert;
var wert=document.getElementById("wert");
	for(i=1,feld=[];i<=number;i++)
{
		if (isprim(i))
{
		feld[feld.length]=i;
		document.write(+i+",");
}
}
return i;
}
</script>
<form name="eingabe">
Bitte n eingeben: <input type="text" id="wert" size="10">
<input style="height: 100px; width: 200px;" type="button" value="Berechnen" onclick="findprim(wert)">
</form>
</body>
</html>

mikdoe · 17. Sep. 2016

wenn js code im <body> definiert wird ist die reihenfolge wichtig. stichwort DOM. also erst die id definieren und danach den js code der darauf zugreift. also das .focus() drunter.
dein code sieht jetzt noch schrecklicher aus. die klammern gehören immer untereinander sonst kannst du nie sehen ob die klammern stimmen. und ganz wichtig: beim entwickeln konsole aufmachen!!

tsseh · 17. Sep. 2016

tklustig schrieb:
frage mich aber immer noch,was an MEINEM Code nicht stimmt;
warum zum Henker wird die Funktion nicht aufgerufen.

deine funktion wird aufgerufen, im 1. beispiel sofort wenn man die seite öffnet, in deinem 2. wenn du auf den button klickst, allerdings wird dann dein formular abgesendet.

tklustig schrieb:
die Zuweisung der Benutzereingabe mittels id funktioniert einfach nicht.

es gibt keine zuweisung per id

tklustig schrieb:
Schon die Anweisung

Code:

document.getElementById("wert").focus();

wird nicht ausgeführt.

da sollte ein fehler kommen, zu dem zeitpunkt ist das element mit id wert noch überhaupt nicht vorhanden, das muss nach unten verscvhoben werden

tklustig schrieb:
Quasi der erste Hinweis, dass die id nicht verarbeitet wird, obwohl sie doch mittels

Code:

Bitte n eingeben: <input type="text" id="wert" size="10">

explizit
definiert wurde.

aber zu spät, das muss nach oben

tklustig · 17. Sep. 2016

Habe jetzt gemäß deinen Angaben die Reihenfolge verändert,also die DOM Regeln somit beachtet.Aber: Kein Erfolg.
Immer noch keine Übergabe der id ersichtlich.Auch die Fokussierung wird immer noch nicht ausgeführt. Bin so langsam echt am Verzweifeln. So einfach, und trotzdem klappt nix.....
Habe das Skript jetzt so modifiziert,dass die Usereingabe

Code:

Bitte n eingeben: <input type="text" id="wert" name="wert" size="10" autofocus>

mittels

Code:

function ausgabe(){
document.write(wert);
}

ausgegeben werden soll.Wenn das klappt,klappt auch der Funktionsaufruf dynamisch. Ganau da aber liegt der Hund begraben,die ID exisitert immer noch nicht

P.S.: Die Klammern stimmen!Habe das mittels Notepad+ extra beachtet. Sorry, aber wenn ich den Code mittels Copy&Paste hier einfüge, gehen die korrekten Formatierungen verloren.Deshalb habe ich beschlossen, die Klammern an den Zeilenanfang zu verfrachten.....

Hier nochmals.....

HTML:

<!Doctype html>
<html> 

<head> 
    <meta charset="utf-8">
    <title> HTML-Skelett </title>

</head>
<style>
body {
 background-color:lightgreen;
 font-family:Times New Roman;
 font-size:30px;
 color:blue;
 }
 </style>

<body> 
<h1> Primzahlen </h1>
<form name="eingabe">                                                                                <!--Formular, wie gefordert nach oben -->
Bitte n eingeben: <input type="text" id="wert" name="wert" size="10" autofocus>
<input style="height: 100px; width: 200px;" type="button" value="Berechnen" onclick="ausgabe()">
</form>
<script>

function finden(number)
{
	for(var i=1,feld=[];i<=number;i++)
{
		if(!(number%i))
{
		feld[feld.length]=i;
}
}
return feld;
}

function isprim(number)
{
return finden(number).length===2;
}

function findprim(number)
{
var i,wert;
var wert=document.getElementById("wert").value;
	for(i=1,feld=[];i<=number;i++)
{
		if (isprim(i))
{
		feld[feld.length]=i;
		document.write(+i+",");
}
}
return i;
 //document.getElementById("wert").focus();                                                                            // focus() obsolet,deshalb deaktiviert
}
function ausgabe(){
document.write(wert);
}

</script>
</body>
</html>

tsseh · 17. Sep. 2016

im onclick übergibst du die variable wert, wert ist aber nicht definiert
https://developer.mozilla.org/de/docs/Web/HTML/Element/Input#attr-value

tklustig · 17. Sep. 2016

Mit dem Link kann ich leider gar nix anfangen.Was meinst du mit "nicht definiert"?In HTML oder JScript nicht definiert??
Definiere "wert" doch mittels der Anweisung:

Code:

var wert=document.getElementById("wert").value; bzw.
var wert=document.getElementById("wert");

Was muss denn da noch definiert werden

Oder muss "wert" etwa als globale Variable deklariert werden, so dass sie für alle Funktionen zur Verfügung steht??

P.S.:

Die Usereingabe wird tatsachlich ausgegeben.

Wenn ich dieselbe Anweisung, nämlich

Code:

wert=document.getElementById("wert").value;

jetzt allerdings für den Aufruf der primfind verwende,also nicht mehr

Code:

onclick="ausgabe()">

,sondern sinnigerweise

Code:

onclick="findprim(wert)"

is' Schicht im Schacht!
Im Grunde bin ich daher kein Stück weiter als vorher....

:icon8:

Offensichtlich lässt sich meine Funktion nicht aufrufen,da eine ihrer Argumente von Usereingaben abhängt. Das aber kann nicht sein...

- - - Aktualisiert - - -

:icon7:

Problem -zumindest partiell - gelöst
Wenn ich das Konstrukt wie folgt abwandle

Code:

var number;
var wert=document.getElementById("wert").value;
number=wert;

funktioniert endlich die Übergabe der Usereingabe an die Funktion wie gewollt.
Allerdings stehe ich immer noch vor der Problematik, dass all meine CSS-Formatierungen zunichte gemacht wurden.
Kann mir jemand erklären, warum das so ist??
Die CSS-Formatierungen stehen doch im body-Bereich des HTMl-Formulares.
Muss ich jetzt etwa einen zweiten CSS-Bereich definieren, quasi abhängig von der id eines zu definierenden Ausgabebereiches??

- - - Aktualisiert - - -

Problem inzwischen auch gelöst
Obgleich: Meine Lösung für die ansteigende Anzahl der Primzahlen hinsichtlich deren Ausgaben mag nicht elegant sein, aber kurz und effektiv isse allzumal!
Erachte hiermit diesen thread als beendet und bedanke mich hiermit bei allen Usern, die zur Hilfe beitrugen,explizit an 'tsseh', nicht zuletzt aber auch' andreax' für dessen brilliante Vereinfachung.
für alle, die den Code per Copy&Paste selbst verwenden wollen,abschließend nochmals in seiner vollen Länge:

HTML:

<!Doctype html>
<html> 

<head> 
    <meta charset="utf-8">
    <title> HTML-Skelett </title>

</head>
<style>
body {
 background-color:lightgreen;
 font-family:Times New Roman;
 font-size:30px;
 color:blue;
 }

 </style>

<body> 
<h1> Primzahlen </h1>
<form name="wert">                                                                              
Bitte n eingeben: <input type="text" id="wert" name="wert" size="10" autofocus>
<input style="height: 100px; width: 200px;" type="button" value="Berechnen" onclick="findprim(wert)"/>
<br<<br><br>
<p id="result"></p>
</form>
<script>

function finden(number)
{
	for(var i=1,feld=[];i<=number;i++)
{
		if(!(number%i))
{
		feld[feld.length]=i;
}
}
return feld;
}

function isprim(number)
{
return finden(number).length===2;
}

function findprim(number)
{
var number,c=1;
var wert=document.getElementById("wert").value;
number=wert;
	for(var i=1,feld=[];i<=number;i++)
{
		if (isprim(i))
{
		c++;
		feld[feld.length]=i;		
		document.getElementById("result").innerHTML+=+i+","; 
	if (c>25)
  {
  document.getElementById('result').innerHTML += ("<br>");
  c=10;
  }
	 	
}
}
return i;                                                                      
}
function ausgabe(){
wert=document.getElementById("wert").value;
document.write("Usereingabe war:"+wert);
}

</script>
</body>
</html>

So long...Bye,Bye.....

mikdoe · 17. Sep. 2016

tklustig schrieb:
P.S.: Die Klammern stimmen!Habe das mittels Notepad+ extra beachtet. Sorry, aber wenn ich den Code mittels Copy&Paste hier einfüge, gehen die korrekten Formatierungen verloren.Deshalb habe ich beschlossen, die Klammern an den Zeilenanfang zu verfrachten.....

nicht wenn du code von anfang an in code tags packst
meintest du notepad ++?

andreax · 17. Sep. 2016

@tklustig
Das Problem liegt an document.write das kann wenn eine Seite erst einmal fertig geladen ist sogar dazu führen das es die alten Inhalte löscht.
Weil document.write nicht ins DOM schreibt sondern an die Standard-Ausgabe und ist eben in dem Fall der Browser.
Also eher sowas wie echo in php.Mit document.write ist man zwar schneller als mit DOM Manipulation aber Funktioniert nur einwandfrei beim Laden.

Folgendes habe ich dazu im Netz aufgegabelt.

Open document only

There is only one restriction on document.write.

Both document.write and document.writeln method should output text into an unready (open) document.

When the page finishes loading, the document becomes closed. An attempt to document.write in it will cause the contents to be erased.

PS: Danke für das Kompliment

MFG

tklustig · 18. Sep. 2016

Bin eben nochmals reingeschneit. Deshalb:
Yuup. Meinte Notepad++. Wir nutzen den halt während des Unterrichts.Gelobe Besserung bzgl. künftiger Codeveröffentlichungen

Ciao.....

[GELÖST] Benutzereingabe wird nicht korrekt angenommen

tklustig

New member

tsseh

Lounge-Member

tklustig

New member

mikdoe

Moderator

andreax

Guest

tklustig

New member

mikdoe

Moderator

tsseh

Lounge-Member

tklustig

New member

tsseh

Lounge-Member

tklustig

New member

mikdoe

Moderator

andreax

Guest

tklustig

New member