Kann Javascript und HTML nicht richtig verbinden

[Michael Giebelhaus]

Hallo, ich versuche gerade mittels HTML und Javascript eine Website zu erstellen mit der man einen Biegebalken berechnen kann. Zuallerst wählt man aus wo der Balken befestigt ist(check) danach die Profilart des Balkens(check) und zum schluss gibt man je nach Balken die Werte ein die man zur Berechnung braucht. Mein Problem ist, dass ich nicht verstehe wie ich das Javascript aufbauen soll. Ich verstehe nicht wie ich je nach Auswahl am Ende die richtige Formel zur Berechnung nehmen soll und wie Java die werte speichern soll.

Nochmal zur verdeutlichen was ich nicht hinbekomme. Java muss folgende Entscheidungen über 4 HTML Seiten speichern:

1. Html Seite: Einseitig gespannter Balken oder beidseitig gespannter Balken

2. HTML Seite: Eckiges oder rundes oder I-Profil

3. HTML Seite: Je nach aus Wahl der 1. und 2. HTML Seite die richtigen Eingabezeilen "aufploppen" lassen und die eingegebenen Werte speichern.

4. HTML Seite: Die eingebenen Parameter (Eingaben 3.Seite) in 2 Hauptformeln(Entscheidung 1.Seite) und 3 unterformeln (Entscheidung 2.Seite) eingeben und am Ende die ausgerechnete Formel in Canvas visuell darstellen.

Ich habe die 3 HTML Seiten hochgeladen jedoch keine ahnung wie ich das Javascript auch nur anfangen soll Biegebalken Testat

[Matthias Scharwies]

Hallo, ich versuche gerade mittels HTML und Javascript eine Website zu erstellen mit der man einen Biegebalken berechnen kann.

Das ist nicht trivial, aber mit ein bisschen Geduld doch zu meistern:

Zuallerst wählt man aus wo der Balken befestigt ist(check) danach die Profilart des Balkens(check) und zum schluss gibt man je nach Balken die Werte ein die man zur Berechnung braucht.

Das müsste in einer HTML-Seite gemacht werden. Meinst du mit (check) Checkboxen? Das oder Eingabefelder.

In die Webseite muss dann ein JavaScript eingebunden werden.

Mein Problem ist, dass ich nicht verstehe wie ich das Javascript aufbauen soll.

Mach dir einen Plan / rezept / algorithmus, in dem du die einzlenen Schritte kleinschrittig notierst.

• Frage mit Event-Handlern die Eingaben deines Formulars ab
• setze die Daten in die passende Formel ein.

Ich verstehe nicht wie ich je nach Auswahl am Ende die richtige Formel zur Berechnung nehmen soll und wie Java die werte speichern soll.

Das hat aber nichts mit der Programmierung sondern mit dem Biegebalken zu tun oder?

BTW: Java ist eine Insel und eine Programmiersprache, du brauchst aber JavaScript.

Nochmal zur verdeutlichen was ich nicht hinbekomme. Java muss folgende Entscheidungen über 4 HTML Seiten speichern:

1. Html Seite: Einseitig gespannter Balken oder beidseitig gespannter Balken

2. HTML Seite: Eckiges oder rundes oder I-Profil

Wie du sagtest mit Checkboxen.

3. HTML Seite: Je nach aus Wahl der 1. und 2. HTML Seite die richtigen Eingabezeilen "aufploppen" lassen und die eingegebenen Werte speichern.

Evtl. mit disabled (siehe Beispiel)

4. HTML Seite: Die eingebenen Parameter (Eingaben 3.Seite) in 2 Hauptformeln(Entscheidung 1.Seite) und 3 unterformeln (Entscheidung 2.Seite) eingeben und am Ende die ausgerechnete Formel in Canvas visuell darstellen.

Das ist wirklich nicht trivial. Fass aber Deine drei Seiten (hast du wirklich 3 Seiten?) in ein Formular zusammen und öffne das canvas mit createelement in der bestehenden Seite.

Ich habe die 3 HTML Seiten hochgeladen jedoch keine ahnung wie ich das Javascript auch nur anfangen soll Biegebalken.rar

Ich lade mir keine Pharisäer oder Trojaner von dir runter, besser wäre ein Live-Beispiel.>

2. HTML Seite: Eckiges oder rundes oder I-Profil

3. HTML Seite: Je nach aus Wahl der 1. und 2. HTML Seite die richtigen Eingabezeilen "aufploppen" lassen und die eingegebenen Werte speichern.

4. HTML Seite: Die eingebenen Parameter (Eingaben 3.Seite) in 2 Hauptformeln(Entscheidung 1.Seite) und 3 unterformeln (Entscheidung 2.Seite) eingeben und am Ende die ausgerechnete Formel in Canvas visuell darstellen.

Ich habe die 3 HTML Seiten hochgeladen jedoch keine ahnung wie ich das Javascript auch nur anfangen soll Biegebalken Testat

Herzliche Grüße

Matthias Scharwies

[Michael Giebelhaus]

Sry ich meinte Javascript. ich kürze mal alles aus meinem Script raus, was nicht notwendig ist(Bilder und Headbereich sowie überschriften)

1. HTML Seite

<form action="Profilwahl.html">
button class="button" onclick="EingespannterBalken()" id="fEBalken">Fest eingespannter Balken</button>
<button class="button" onclick="()" id="bGBalken">Beidseitig gelargerter Balken</button>
</form>

2.HTML Seite(Profilwahl.html)

<form action="Werteeingabe.html">
<button class="button" onclick="()"   id="show_button1.1">Rechteckquerschnitt</button>
<button class="button" onclick="()"   id="show_button1.2">Kreisquerschnitt</button>		
<span><button class="button" onclick="()"   id="show_button1.3">I-Profil</button></span>

3. HTML Seite(Werteingabe.html)

<form name="Werte"  onSubmit="window.open('BiegebalkenCanvas.html')" method="post"> //on submit öffnet nicht die 4te HTML Seite
		
Länge: <input type="text" name="fLänge" >
Breite: <input type="text" name="fBreite">
Höhe: <input type="text" name="fHöhe">
Radius: <input type="text" name="fRadius">
Breite innen: <input type="text" name="fBreiteInnen">
Breite außen: <input type="text" name="fBreiteAussen">
Höhe innen: <input type="text" name="fHöheInnen">
Höhe außen: <input type="text" name="fHöheAussen">
Kraft in N: <input type="text" name="fKraft">
E-Modul: <input type="text" name="fE-Modul">
A-Punkt: <input type="text" name="fA-Punkt">
<input type="submit" value="Submit">
</form>

Java

var Balkenart;
var Profilart;
var läng;
var weit;
var höhe;
var rad;
var Brin;
var brau;
var höin;
var höau;
var New;
var EM;

Ich wollte gucken ob Java einen wert in die andere seite übernimmt mit folgendem Beispiel:

function EingespannterBalken() //wenn man auf den Button eingespannter Balken drückt sollte diese "Funktion" ausgelöst werden,
{
	var Balkenart++;
}

und auf der Seite profilwahl hatte ich dann noch stehen:

document.write(Balkenart)

jedoch hat er das nicht ausgegeben

[Matthias Scharwies]

Servus!

Sry ich meinte Javascript. ich kürze mal alles aus meinem Script raus, was nicht notwendig ist(Bilder und Headbereich sowie überschriften)

1. HTML Seite

<form action="Profilwahl.html">
button class="button" onclick="EingespannterBalken()" id="fEBalken">Fest eingespannter Balken</button>
<button class="button" onclick="()" id="bGBalken">Beidseitig gelargerter Balken</button>
</form>

Frag Ereignisse nicht mit HTML-Event-Attributen sondern addEventListener ab. Setzte nur einen für das gesamte formular, statt viele für jeden Scheiß. BTW: Der zweite hat in onclick="()" keinen Funktionsaufruf.

...

3. HTML Seite(Werteingabe.html)

<form name="Werte"  onSubmit="window.open('BiegebalkenCanvas.html')" method="post"> //on submit öffnet nicht die 4te HTML Seite
		
...
</form>

onsubmit heißt ja auch nicht onSubmit.

Noch einmal: Öffne keine neuen Fenster - sondern bleib auf einer Seite.

Java

JavaScript

document.write(Balkenart)

Arbeite mit document.getElementById

jedoch hat er das nicht ausgegeben

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

onsubmit heißt ja auch nicht onSubmit.

Doch. HTML ist case-insensitiv (was Element- und Attributbezeichner angeht). Du könntest genausogut auch oNsUbMiT schreiben.

Oder genausoschlecht. Eventhandler sollten nicht im HTML stehen.

Und das man das könnte heißt nicht, dass man das sollte. Konsequente Kleinschreibung von Element- und Attributbezeichnern ist gängige Praxis. Aber mit Großbuchstaben funktioniert es ebenso.

LLAP 🖖

[Gunnar Bittersmann]

@@Matthias Scharwies

1. Html Seite: Einseitig gespannter Balken oder beidseitig gespannter Balken

2. HTML Seite: Eckiges oder rundes oder I-Profil

Wie du sagtest mit Checkboxen.

Wirklich?

Checkbox hieße: einseitig gespannter Balken oder nicht einseitig gespannter Balken. Bei 3 Auswahlmöglichkeiten geht eine Checkbox (2 Zustände) gar nicht.

Das passende UI-Element sind Radiobuttons (Auswahl einer aus mehreren Optionen):

1. ◉ einseitig gespannter Balken
   ◯ beidseitig gespannter Balken

2. ◯ eckiges Profil
   ◉ rundes Profil
   ◯ I-Profil

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

1. Html Seite: Einseitig gespannter Balken oder beidseitig gespannter Balken

2. HTML Seite: Eckiges oder rundes oder I-Profil

Wie du sagtest mit Checkboxen.

Wirklich?

Checkbox hieße: einseitig gespannter Balken oder nicht einseitig gespannter Balken. Bei 3 Auswahlmöglichkeiten geht eine Checkbox (2 Zustände) gar nicht.

Das passende UI-Element sind Radiobuttons (Auswahl einer aus mehreren Optionen):

1. ◉ einseitig gespannter Balken
   ◯ beidseitig gespannter Balken

2. ◯ eckiges Profil
   ◉ rundes Profil
   ◯ I-Profil

Stimmt, das

oder ... oder ...

hab ich überlesen. :-(

LLAP 🖖

Herzliche Grüße

Matthias Scharwies

[Google weiß alles]

Warum eigentlich mehrere Seiten? Das birgt nur weitere Herausforderungen. Und eine reicht.

Zudem sind Deine Fragen nicht eine, sondern mehrere.

Also denke ich, es ist eine gute Idee, Dir ein paar Möglichkeiten zu zeigen und Dich aufzufordern das durchzuprobieren und Dich aufzufordern zu fragen, wenn Du mit dem Anschubser nicht klarkommst:

<!doctype html>
<html lang='de'>
    <head>
        <meta charset='utf-8'>
        <style type='text/css'>
            form  { display:none; }
            label { display: inline-block; width: 8em; }
        </style>
    </head>

    <body>
        <h1>Tolle Berechnung</h1>
        <noscript>
        Leider funktioniert diese Berechnung nur mit Javascript.
        </noscript>

        <form id='f_spannart' name='f_spannart' onsubmit='return false;'>
            <h2>Spannart:</h2>
            <input type='radio' name='spannart' value='einseitig'  checked>einseitig</input>
            <br><input type='radio' name='spannart' value='zweiseitig'>einseitig</input>
            <br><button onclick='spannart_selected()'>Weiter</button>
        </form>

        <form id='f_profil' name='f_profil' onsubmit='return false;'>
            <h2>Profil:</h2>
            <input type='radio' name='profil' value='Rund'  checked>Rund</input>
            <br><input type='radio' name='profil' value='4Kant'>4-Kant</input>
            <br><input type='radio' name='profil' value='I'>I-Profil</input>
            <br><button onclick='profil_selected()'>Weiter</button>
            <button onclick='berechnung_restart()'>Restart</button>
        </form>

        <form id='f_masze' name='f_masze' onsubmit='return false;'>
            <h2>Maße:</h2>
            <label for='durchmesser'>Durchmesser:</label>
            <input type='number' min=0 step="any" name='durchmesser' value='0'>
            <br><label for='hoehe'>Höhe:</label>
            <input type='number' name='hoehe' min=0 step="any" value='0'>
            <br><label for='breite'>Breite:</label>
            <input type='number' name='breite' min=0 step="any" value='0'>
            <br><button onclick='berechne()'>Weiter</button>
            <button onclick='berechnung_restart()'>Restart</button>
        </form>

        <script>
            function berechnung_restart () {
                document.forms['f_profil'].style.display='none';
                document.forms['f_masze'].style.display='none';
                document.forms['f_spannart'].style.display='block';
            }

            function spannart_selected() {
                spannart=document.forms['f_spannart'].elements['spannart'].value;
                document.getElementById('f_spannart').style.display='none';
                document.getElementById('f_profil').style.display='block';
            }

            function profil_selected() {
                spannart=document.forms['f_profil'].elements['profil'].value;
                if ( profil=='Rund' ) {
                        document.forms['f_masze'].elements['durchmesser'].value=0;
                        document.forms['f_masze'].elements['durchmesser'].disabled=false;
                        document.forms['f_masze'].elements['breite'].value='';
                        document.forms['f_masze'].elements['breite'].disabled=true;
                        document.forms['f_masze'].elements['hoehe'].value='';
                        document.forms['f_masze'].elements['hoehe'].disabled=true;
                } else {
                        document.forms['f_masze'].elements['durchmesser'].value='';
                        document.forms['f_masze'].elements['durchmesser'].disabled=true;
                        document.forms['f_masze'].elements['breite'].value=0;
                        document.forms['f_masze'].elements['breite'].disabled=false;
                        document.forms['f_masze'].elements['hoehe'].value=0;
                        document.forms['f_masze'].elements['hoehe'].disabled=false;
                }
                document.getElementById('f_profil').style.display='none';
                document.getElementById('f_masze').style.display='block';
            }

            function berechne() {
                alert('Das ist jetzt Dein Job...');
            }

            var spannart='';
            var profil='';
            berechnung_restart();

        </script>
    </body>
<html>

[JürgenB]

Hallo,

        <form id='f_spannart' name='f_spannart' onsubmit='return false;'>

wenn Formularelemente nur als GUI für ein Javascript dienen, kann auf das form-Element verzichtet werden.

Gruß
Jürgen

[Der Martin]

Hi,

        <form id='f_spannart' name='f_spannart' onsubmit='return false;'>

wenn Formularelemente nur als GUI für ein Javascript dienen, kann auf das form-Element verzichtet werden.

dann verspielt man aber die Möglichkeit, die Verarbeitung der Eingaben auf normale Weise, also durch Drücken der Enter-Taste auszulösen. Aber natürlich muss dann, damit irgendwas Sinnvolles passieren kann, auch mehr als nur ein return (false) im Eventhandler stehen.

Ciao,
 Martin

[JürgenB]

Hallo Martin,

        <form id='f_spannart' name='f_spannart' onsubmit='return false;'>

wenn Formularelemente nur als GUI für ein Javascript dienen, kann auf das form-Element verzichtet werden.

dann verspielt man aber die Möglichkeit, die Verarbeitung der Eingaben auf normale Weise, also durch Drücken der Enter-Taste auszulösen. Aber natürlich muss dann, damit irgendwas Sinnvolles passieren kann, auch mehr als nur ein return (false) im Eventhandler stehen.

da gibt es aber Alternativen, wie z.B. auf das change- oder keyup-Event zu reagieren. Und wenn im form ein return (false) steht, sollte man es meiner Meinung nach lieber weg lassen.

Gruß
Jürgen

[JürgenB]

Hallo Michael,

ich habe vor einiger Zeit mal einen Energiekostenrechner gebastelt (und gerade noch mal etwas modernisiert). Das ist evtl. eine Anregung für dich, wie du dein Problem angehen kannst.

Gruß
Jürgen