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

live rechnen mit JS

matze511

New member
Hallo liebe Profis,

ich habe mir aus einem Beispiel von hier eine mathematische Funktion erstellt nur leider komm ich nicht weiter.
Wenn ich in der Tabelle die Werte eingebe und dann auf rechne klicke sollte es die grau hinterlegten Felder aktualisieren nur leider klappt das nicht so, noch lieber wäre mir das es live rechnet, wenn ich in das nächste Feld gehe.
Das ist der Code für das JS:
Javascript:
<script language="javascript" type="text/javascript">
    function traufhöVordachNeigung () {
        var wertgrundmaß = document.getElementById('grundmaß').firstChild.nodeValue;
        if ( wertgrundmaß == '' );
        wertgrundmaß = Number( wertgrundmaß );
        
        var wertdachneigung = document.getElementById('dachneigung').firstChild.nodeValue;
        if ( wertgrundmaß == '' );
        wertdachneigung = Number( wertdachneigung );
        
        var wertdachüberstand = document.getElementById('dachüberstand').firstChild.nodeValue;
        if ( wertdachüberstand == '' );
        wertdachüberstand = Number( wertdachüberstand );
        
        var werttraufhöhe = document.getElementById('traufhöhe').firstChild.nodeValue;
        if ( werttraufhöhe == '' );
        werttraufhöhe = Number( werttraufhöhe );
        
        var wertfußpfettenrücksprung = document.getElementById('fußpfettenrücksprung').firstChild.nodeValue;
        if ( wertfußpfettenrücksprung == '' );
        wertfußpfettenrücksprung = Number( wertfußpfettenrücksprung );
        
        var wertraumhöheRohbau = document.getElementById('raumhöheRohbau').firstChild.nodeValue;
        if ( wertraumhöheRohbau == '' );
        wertraumhöheRohbau = Number( wertraumhöheRohbau );
        
        wertfirsthöhe = round((((wertgrundmaß + wertdachüberstand) * Math.tan(radians(wertdachneigung))) + werttraufhöhe) / 0.001) * 0.001);
        wertokKniestock = round((wertdachüberstand * Math.tan(radians(wertdachneigung))) / 0.001) * 0.001;
        wertlotrechtesObholz = (wertsparrenhöhe - wertklauentiefe) / Math.cos(radians(wertdachneigung));

        // Calculate okFußpfette
        const a = round(((wertdachüberstand + wertfußpfettenrücksprung) * Math.tan(radians(wertdachneigung))) / 0.001) * 0.001;
        wertokFußpfette = round(((a - wertlotrechtesObholz) + werttraufhöhe) / 0.001) * 0.001;

        // Calculate okFirstpfette
        const b = wertgrundmaß - 0.5 * wertfirstpfettenbreite + wertdachüberstand;
        const c = b * Math.tan(radians(wertdachneigung)) - wertlotrechtesObholz + werttraufhöhe;
        wertokFirstpfette = round(c / 0.001) * 0.001;
        
        var textNodefirsthöhe = document.createTextNode( wertfirsthöhe.toString() );
        document.getElementById('firsthöhe').replaceChild(textNodefirsthöhe,document.getElementById('firsthöhe').firstChild);
        
        var textNodeokFußpfette = document.createTextNode( wertokFußpfette.toString() );
        document.getElementById('okFußpfette').replaceChild(textNodeokFußpfette,document.getElementById('okFußpfette').firstChild);
 
        var textNodeokFirstpfette = document.createTextNode( wertokFirstpfette.toString() );
        document.getElementById('okFirstpfette').replaceChild(textNodeokFirstpfette,document.getElementById('okFirstpfette').firstChild);
    }
</script>

Wo liegt hier mein Fehler?

LG matze

Danke schonmal für jegliche Hilfe!
 
Ich mußte das etwas einkürzen und daher hier der Code für die Tabelle:
HTML:
<body id="page" class="off-canvas slide-nav">
    <div class="container">

<?php include ("menue.php"); ?>

        <div class="row">
          <section role="main">
            <h4>Eingabe der vorhandenen Maße!</h4>
              <div class="row">
                  <div class="twelve columns">
                        
<fieldset id="all">
 <legend>bitte bekannte Maße eingeben</legend>

  <table>
   <form action="sparren-ausgeben.php" method="post" enctype="multipart/form-data" name="form1" >
    <tr>
        <td><label for="wasistgegeben">Was ist gegeben: </label></td>
        <td id="auswahl">
         <select name="wasistgegeben" id="wasistgegeben">
            <option id="--" value="--"> -- </option>
            <option id="traufhöVordachNeigung" value="traufhöVordachNeigung">Grdmaß-Traufhö-Vordach-Neigung</option>
            <option id="firsthöTraufhöVordach" value="firsthöTraufhöVordach">Grdmaß-Firsthö-Traufhö-Vordach-Neigung</option>
            <option id="vordachNeigungOKFußpf" value="vordachNeigungOKFußpf">Grdmaß-Vordach-Neigung-OKFußpf</option>
            <option id="traufhöVordachOKFußpf" value="traufhöVordachOKFußpf">Grdmaß-Traufhö-Vordach-OKFußpf</option>
            <option id="traufhöNeigungOKFußpf" value="traufhöNeigungOKFußpf">Grdmaß-Traufhö-Neigung-OKFußpf</option>
            <option id="firsthöTraufhöNeigung" value="firsthöTraufhöNeigung">Grdmaß-Firsthö-Traufhö-Neigung</option>
            <option id="firsthöTraufhöOKFußpf" value="firsthöTraufhöOKFußpf">Grdmaß-Firsthö-Traufhö-OKFußpf</option>
            <option id="traufhöNeigungOKFiPf" value="traufhöNeigungOKFiPf">Grdmaß-Traufhö-Neigung-OKFiPf</option>
            <option id="firsthöVordachNeigung" value="firsthöVordachNeigung">Grdmaß-Firsthö-Vordach-Neigung</option>
            <option id="firsthöVordachOKFußpf" value="firsthöVordachOKFußpf">Grdmaß-Firsthö-Vordach-OKFußpf</option>
            <option id="vordachNeigungOKFiPf" value="vordachNeigungOKFiPf">Grdmaß-Vordach-Neigung-OKFiPf</option>
            <option id="vordachOKFußpfOKFiPf" value="vordachOKFußpfOKFiPf">Grdmaß-Vordach-OKFußpf-OKFiPf</option>
         </select>
        </td>
    </tr>

    <tr>   
        <td><label for="profil"><h6><u>Profil:</u></h6></label></td>
    <td><label for="profil"><h6><u>in m mit 3 Stellen nach Komma</u></h6></label></td>
    <td></td>
    <td></td>
    </tr>
    <tr>   
        <td><label for="grundmaß">Grundmaß:</label></td>
        <td><input name="grundmaß" id="grundmaß" type="text" inputmode="numeric" min="0" pattern="\d+(,\d{1,3})?" size="30" maxlength="40" placeholder="5,00" disabled /></td>
        <td><label for="dachneigung">Dachneigung:</label></td>
        <td><input name="dachneigung" id="dachneigung" type="text" inputmode="numeric" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="30,0" disabled /></td>
    </tr>
    <tr>   
        <td><label for="dachüberstand">Dachüberstand:</label></td>
        <td><input name="dachüberstand" id="dachüberstand" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="0,50" disabled /></td>   
        <td><label for="traufhöhe">Traufhöhe +/-:</label></td>
        <td><input name="traufhöhe" id="traufhöhe" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="3,000" disabled /></td>
    </tr>
    <tr>   
        <td><label for="firsthöhe">Firsthöhe:</label></td>
        <td><input name="firsthöhe" id="firsthöhe" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="3,007" disabled /></td>
        <td><label for="fußpfettenrücksprung">Fußpfettenrücksprung:</label></td>
        <td><input name="fußpfettenrücksprung" id="fußpfettenrücksprung" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="0,060"/></td>
    </tr>
    <tr>   
        <td><label for="okFußpfette">OK Fußpfette:</label></td>
        <td><input name="okFußpfette" id="okFußpfette" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="0,120" disabled /></td> 
        <td><label for="okFirstpfette">OK Firstpfette:</label></td>
        <td><input name="okFirstpfette" id="okFirstpfette" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="2,799" disabled /></td>
    </tr>
    <tr>   
        <td><label for="raumhöheRohbau">Raumhöhe Rohbau:</label></td>
        <td><input name="raumhöheRohbau" id="raumhöheRohbau" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="2,650"/></td>
    </tr>
    <tr>   
        <td><label for="holzstärkenbaumaße"><h6><u>Holzstärken / Baumaße:</u></h6></label></td>
    <td><label for="holzstärkenbaumaße"><h6><u>in cm mit 2 Stellen nach Komma</u></h6></label></td>
    <td></td>
    <td></td>
    </tr>
    <tr>   
        <td></td>
    <td><label for="breite">breite</label></td>
    <td></td>
    <td><label for="höhe">höhe</label></td>
    </tr>
    <tr>   
        <td><label for="sparren">Sparren:</label></td>
        <td><input name="sparrenbreite" id="sparrenbreite" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="8,00"/></td>
    <td><label for="/">/</label></td>
        <td><input name="sparrenhöhe" id="sparrenhöhe" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="18,00"/></td>
    </tr>
    <tr>   
        <td><label for="fußpfette">Fußpfette/ Schwelle:</label></td>
        <td><input name="fußpfettenbreite" id="fußpfettenbreite" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="12,00"/></td>
    <td><label for="/">/</label></td>
        <td><input name="fußpfettenhöhe" id="fußpfettenhöhe" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="12,00"/></td>
    </tr>
    <tr>   
        <td><label for="mittelpfette">Mittelpfette:</label></td>
        <td><input name="mittelpfettenbreite" id="mittelpfettenbreite" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="18,00"/></td>
    <td><label for="/">/</label></td>
        <td><input name="mittelpfettenhöhe" id="mittelpfettenhöhe" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="28,00"/></td>
    </tr>
    <tr>   
        <td><label for="Firstpfette">Firstpfette:</label></td>
        <td><input name="firstpfettenbreite" id="firstpfettenbreite" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="12,00"/></td>
    <td><label for="/">/</label></td>
        <td><input name="firstpfettenhöhe" id="firstpfettenhöhe" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="12,00"/></td>
    </tr>
    <tr>   
        <td><label for="zangen">Zangen:</label></td>
        <td><input name="zangenbreite" id="zangenbreite" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="6,00"/></td>
    <td><label for="/">/</label></td>
        <td><input name="zangenhöhe" id="zangenhöhe" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="16,00"/></td>
    </tr>
    <tr>   
        <td><label for="firstlaschen">Firstlaschen:</label></td>
        <td><input name="firstlaschenbreite" id="firstlaschenbreite" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="3,00"/></td>
    <td><label for="/">/</label></td>
        <td><input name="firstlaschenhöhe" id="firstlaschenhöhe" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="12,00"/></td>
    </tr>
    <tr>
    </tr>
    <tr>   
        <td><label for="verkämmungZangen">Verkämmung Zangen:</label></td>
        <td><input name="verkämmungZangen" id="verkämmungZangen" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="2,00"/></td>
    <td></td>
        <td></td>
    </tr>
    <tr>   
        <td><label for="klauentiefe">Klauentiefe:</label></td>
        <td><input name="klauentiefe" id="klauentiefe" type="text" pattern="\d+(,\d{1,})?" size="30" maxlength="50" placeholder="3,00"/></td>
    <td></td>
        <td></td>
    </tr>
    <tr> 
        <td><button name="rechne" id="rechne" type="button" onklick="traufhöVordachNeigung()"> rechne </button>
        <button name="abschicken" id="abschicken" type="submit"> Weiter </button>
        <button name="reset" id="reset" type="reset"> Zurücksetzen </button></td>
    </tr>
       </form>
      </table>
     </fieldset>
</div>
</div>
</section>


</div>

      <span class="content">
        <footer class="site-footer row" role="contentinfo">
          <?php include ("footer.php"); ?>
      </span>
      </footer>
      </div>
</body>
 
Zurück
Oben