JavaScript <-> Input Feld ist nicht nutzbar

Jubaca · 5. September 2017

Hallo an die Forums Gemeinschaft,

benötige etwas Unterstützung. Ich selber arbeite schon seit Jahren mit HTML und CSS aber nicht mit JS.

Ich wollte mir aus reiner Neugierde der Funktion eine Rechenformel umsetzten. Diese habe ich schon per EXCEL ausgearbeitet und funktionieren. Nun hatte ich mir einfach Online einen ähnlichen Aufbau von einer fremd Webseite genommen um zunächst den Aufbau zu verstehen. So weit so gut. Ich konnte auch die Formel für meine belange anpassen und sogar ein zweites Ausgabefeld erstellen welches wiederum mit einer weiteren Formel die das Ergebnis aus der ersten Formel mit nutzt erstellen.

Die Ergebnisse sind richtig und ich bin soweit begeistert doch: habe ich ein Problem mit der Zweite Formel. Das Ergebnis der ersten Formel wird mit einer weiteren Formel und dem Eingabefeld "Zuwachs" welches im JS unter den Eintrag "Bar" läuft berechnet. Und genau hier ist das Problem ich bekomme das Feld "Zuwachs" nicht geladen und habe zunächst den Wert 1,7 fest in die Formel geschrieben. Unter function ist Bar auch eingetragen.

Warum wird das Feld nicht gelesen oder zur Berechnung herangezogen?

Hoffe es kann mir jemand helfen. Vielen Dank!

mfg Stephan

Hier der Code:

HTML

<!doctype html>
<html>
<head>
<script type="text/javascript">
<!-- hide
function custRound(x,places) {
        return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)}

function CalculateCircumference(Diameter,Profile,Width,Bar) {

var OverallRadius=((Width/Profile)*Diameter);
var Circumference=custRound((OverallRadius),2);

var Tu=((OverallRadius*(1+1.7))*0.97);
var CircumferenceT=custRound((Tu),2);

document.Rad.Circumference.value=Circumference;
document.Rad.CircumferenceT.value=CircumferenceT;
 
} 
// -->
</script>
</head>
<body>
<div style="width:100%">
<CENTER>

<form method="post" name="Rad" action="self">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1">

<TR>
    <TD ALIGN="RIGHT">
    Input:
    </TD>

    <TD>
    <input type="text" name="Width" size=4 value="218" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value)"></TD>
</TR>

<TR>

    <TD ALIGN="RIGHT">
    teiler alt:
    </TD>

    <TD>
    <input type="text" name="Profile" size=4 value="10" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value)">
</TD>
</TR>

<TR>        
    <TD ALIGN="RIGHT">
    teiler neu:
    </TD>

    <TD>
    <input type="text" name="Diameter" size=4 value="8.5" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value)">
</TD>
</TR> 

<TR>
    <TD ALIGN="RIGHT"><br><br>
    Neuer Input:
    </TD>
    
    <TD><br><br>
    <input type="text" name="Circumference" size=4 value="">
<br /></TD>
</TR>

<TR>        
    <TD ALIGN="RIGHT"><br><br>
    Zuwachs:
    </TD>

    <TD><br><br>
    <input type="text" name="Bar" size=4 value="1.7" onBlur="CalculateCircumferenceT(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value)"></TD>
</TR>

<TR>
    <TD ALIGN="RIGHT"><br><br>
    gesamt Input:
    </TD>
    
    <TD><br><br>
    <input type="text" name="CircumferenceT" size=4 value=""><br /></TD>
</TR>
</TABLE>
 </CENTER>
 
&nbsp;<p align="center">
<input type="button" name="Recalculate Circumference" value="berechnen"
  onClick="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value)">
</p>
</form>

</div>
</body>
</html>

Alles anzeigen

Sempervivum · 5. September 2017

In der Definition deiner Funktion CalculateCircumference() definierst Du zwar den Parameter "Bar" aber in den Aufrufen versorgst Du ihn nicht, sondern nur drei Parameter.

Jubaca · 5. September 2017

danke für die Antwort. Ich bekome nur ein NaN statt das Ergebniss der Code ist nun wie folgt.

HTML

<!doctype html>
<html>
<head>
<script type="text/javascript">
<!-- hide
function custRound(x,places) {
        return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)}

function CalculateCircumference(Diameter,Profile,Width,Bar) {

var OverallRadius=((Width/Profile)*Diameter);
var Circumference=custRound((OverallRadius),2);

var Tu=((OverallRadius*(1+Bar))*0.97);
var CircumferenceT=custRound((Tu),2);

document.Rad.Circumference.value=Circumference;
document.Rad.CircumferenceT.value=CircumferenceT;
 
} 
// -->
</script>
</head>
<body>
<div style="width:100%">
<CENTER>

<form method="post" name="Rad" action="self">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1">

<TR>
    <TD ALIGN="RIGHT">
    Input:
    </TD>

    <TD>
    <input type="text" name="Width" size=4 value="218" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value)"></TD>
</TR>

<TR>

    <TD ALIGN="RIGHT">
    teiler alt:
    </TD>

    <TD>
    <input type="text" name="Profile" size=4 value="10" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value)">
</TD>
</TR>

<TR>        
    <TD ALIGN="RIGHT">
    teiler neu:
    </TD>

    <TD>
    <input type="text" name="Diameter" size=4 value="8.5" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value)">
</TD>
</TR> 

<TR>
    <TD ALIGN="RIGHT"><br><br>
    Neuer Input:
    </TD>
    
    <TD><br><br>
    <input type="text" name="Circumference" size=4 value="">
<br /></TD>
</TR>

<TR>        
    <TD ALIGN="RIGHT"><br><br>
    Zuwachs:
    </TD>

    <TD><br><br>
    <input type="text" name="Bar" size=4 value="1.7" onBlur="CalculateCircumferenceT(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.Bar.value)"></TD>
</TR>

<TR>
    <TD ALIGN="RIGHT"><br><br>
    gesamt Input:
    </TD>
    
    <TD><br><br>
    <input type="text" name="CircumferenceT" size=4 value=""><br /></TD>
</TR>
</TABLE>
 </CENTER>
 
&nbsp;<p align="center">
<input type="button" name="Recalculate Circumference" value="berechnen"
  onClick="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value)">
</p>
</form>

</div>
</body>
</html>

Alles anzeigen

Sempervivum · 5. September 2017

Jetzt hast Du nur einen der Aufrufe erweitert. ?

Jubaca · 5. September 2017

Sorry wie gesagt JS ist für mich noch nicht ganz verständlich. Bitte Zeilenangabe etwas genauer welche anderen Aufrufe?

Ich habe ja zwei Ausgabefelder/Ergebnisfeldr ein mal Zeile 67 für "Neuer Input:" mit den den Namen="Circumference" und Zeile 86 das zweite Ergebnisfeld. Namen="CircumferenceT". Wie bekomme ich nun das JS dazu Zeile 77 Name="Bar" mit zu lesen im JS in der Zeile 14 var Tu=((OverallRadius*(1+Bar))*0.97);?

Ich habe schon überall Bar eingegeben und nichts geht nur "NaN" wenn ich in die Formel 1.7 statt Bar eintrage habe ich mein Ergebnis. Ich Checke es nicht

Jubaca · 5. September 2017

vielleicht den Code mal im Browser testen. Ich glaube es hängt noch woanders.

Sempervivum · 5. September 2017

In Posting #3 stehen in den Zeilen 37, 47, 57, 93 noch Aufrufe von CalculateCircumference ohne den Parameter "Bar".

Jubaca · 5. September 2017

sobald ich in Zeile 93 Bar eintrage läuft nichts mehr. Zeile 77 ist ja auch onBlur="CalculateCircumferenceT" also CalculateCircumference + T

Es geht leider nicht. Bitte mal im Browser testen. Habe jetzt nur Zeile 93 weg gelassen aber geht nicht Code ist nun wie folgt:

HTML

<!doctype html>
<html>
<head>
<script type="text/javascript">
<!-- hide
function custRound(x,places) {
        return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)}
        
function CalculateCircumference(Diameter,Profile,Width,Bar) {

var OverallRadius=((Width/Profile)*Diameter);
var Circumference=custRound((OverallRadius),2);

var Tu=((OverallRadius*(1+Bar))*0.97);
var CircumferenceT=custRound((Tu),2);

document.Rad.Circumference.value=Circumference;
document.Rad.CircumferenceT.value=CircumferenceT;
 
} 
// -->
</script>
</head>
<body>
<div style="width:100%">
<CENTER>

<form method="post" name="Rad" action="self">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1">

<TR>
    <TD ALIGN="RIGHT">
    Input:
    </TD>
    
    <TD>
    <input type="text" name="Width" size=4 value="218" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.Bar.value)"></TD>
</TR>

<TR>

    <TD ALIGN="RIGHT">
    teiler alt:
    </TD>
    
    <TD>
    <input type="text" name="Profile" size=4 value="10" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.Bar.value)">
</TD>
</TR>

<TR>   
    <TD ALIGN="RIGHT">
    teiler neu:
    </TD>
    
    <TD>
    <input type="text" name="Diameter" size=4 value="8.5" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.Bar.value)">
</TD>
</TR> 

<TR>
    <TD ALIGN="RIGHT"><br><br>
    Neuer Input:
    </TD>
    
    <TD><br><br>
    <input type="text" name="Circumference" size=4 value="">
<br /></TD>
</TR>

<TR>        
    <TD ALIGN="RIGHT"><br><br>
    Zuwachs:
    </TD>
    
    <TD><br><br>
    <input type="text" name="Bar" size=4 value="1.7" onBlur="CalculateCircumferenceT(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.Bar.value)"></TD>
</TR>

<TR>
    <TD ALIGN="RIGHT"><br><br>
    gesamt Input:
    </TD>
    
    <TD><br><br>
    <input type="text" name="CircumferenceT" size=4 value=""><br /></TD>
</TR>
</TABLE>
 </CENTER>
 
&nbsp;<p align="center">
<input type="button" name="Recalculate Circumference" value="berechnen"
  onClick="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value)">
</p>
</form>
</div>
</body>
</html>

Alles anzeigen

Sempervivum · 6. September 2017

Zwei Fehler:

Code

onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.Bar.value)"

Es fehlt der vierte Parameter und beim dritten ist das ".Bar" zu viel.

So muss der Aufruf lauten:

Code

onClick="CalculateCircumference(document.Rad.Diameter.value, document.Rad.Profile.value, document.Rad.Width.value, document.Rad.Bar.value)"

Jubaca · 6. September 2017

Jo Danke jetzt habe ich es geschnallt. Jetzt bekomme ich ein Ergebniss doch leider ist dieses nun falsch.

Wenn in JS Zeile 14 statt Bar 1.7 fest eingetragen wird ist die ausgabe von 485.3 genau richtig. Wenn ich mir nur den Wert Bar ausgebe sehe ich 1.7 was richtig da dieser so vorbelegt ist, aber mit dem Aufruf über Bar (auch 1.7) ist das Ergebnis über 2000 und somit falsch. Was passiert da den nun?

Code Aktueller Stand:

HTML

<!doctype html>
<html>
<head>
<script type="text/javascript">
<!-- hide
function custRound(x,places) {
        return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)}
        
function CalculateCircumference(Diameter,Profile,Width,Bar) {

var OverallRadius=((Width/Profile)*Diameter);
var Circumference=custRound((OverallRadius),2);

var Tu=((OverallRadius*(1+Bar))*0.97);
var CircumferenceT=custRound((Tu),2);

document.Rad.Circumference.value=Circumference;
document.Rad.CircumferenceT.value=CircumferenceT;
 
} 
// -->
</script>
</head>
<body>
<div style="width:100%">
<CENTER>

<form method="post" name="Rad" action="self">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1">

<TR>
    <TD ALIGN="RIGHT">
    Input:
    </TD>
    
    <TD>
    <input type="text" name="Width" size=4 value="218" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value,document.Rad.Bar.value)"></TD>
</TR>                  

<TR>

    <TD ALIGN="RIGHT">
    teiler alt:
    </TD>
    
    <TD>
    <input type="text" name="Profile" size=4 value="10" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value,document.Rad.Bar.value)">
</TD>
</TR>

<TR>   
    <TD ALIGN="RIGHT">
    teiler neu:
    </TD>
    
    <TD>
    <input type="text" name="Diameter" size=4 value="8.5" onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value,document.Rad.Bar.value)">
</TD>
</TR> 

<TR>
    <TD ALIGN="RIGHT"><br><br>
    Neuer Input:
    </TD>
    
    <TD><br><br>
    <input type="text" name="Circumference" size=4 value="">
<br /></TD>
</TR>

<TR>        
    <TD ALIGN="RIGHT"><br><br>
    Zuwachs:
    </TD>
    
    <TD><br><br>
    <input type="text" name="Bar" size=4 value="1.7" onBlur="CalculateCircumferenceT(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.value,document.Rad.Bar.value)"></TD>
</TR>

<TR>
    <TD ALIGN="RIGHT"><br><br>
    gesamt Input:
    </TD>
    
    <TD><br><br>
    <input type="text" name="CircumferenceT" size=4 value=""><br /></TD>
</TR>
</TABLE>
 </CENTER>
 
&nbsp;<p align="center">
<input type="button" name="Recalculate Circumference" value="berechnen"
  onClick="CalculateCircumference(document.Rad.Diameter.value, document.Rad.Profile.value, document.Rad.Width.value, document.Rad.Bar.value)"
</p>
</form>
</div>
</body>
</html>

Alles anzeigen

Sempervivum · 6. September 2017

Habe ich jetzt nicht getestet, aber der Fehler liegt sehr wahrscheinlich in Zeile 14:

Code

var Tu=((OverallRadius*(1+Bar))*0.97);

Liest man Bar aus einem input-Feld aus, handelt es sich um einen String. In dem Fall werden beim "+"-Operator zwei Strings zusammen gefügt:

"1" + "1.7" ergibt "11.7" statt 2.7. Abhilfe, indem "Bar" in Float umgewandelt wird:

Code

var Tu=((OverallRadius*(1+parseFloat(Bar)))*0.97);

Jubaca · 6. September 2017

Ok vielen Dank Sempervivum! Das erklärt es ja woran es liegt. So etwas weiß man natürlich nicht als nicht JS Fachmann. Danke das ich so viel lernen konnte und durfte durch deine Hilfe. Somit sollte ich auch in Zukunft JS schon besser Lesen und verstehen können.

mfg Stephan

JavaScript <-> Input Feld ist nicht nutzbar

Jetzt mitmachen!

Teilen