Einfaches Javascript funktioniert nicht mehr

lozux · 9. Dezember 2016

Hallo zusammen,

folgendes Problem. Zur Integration in ein Projekt brauche ich eine einfache Rechenoperation.

In der HTML-Datei steht folgendes:

<html>

<head>
<script src="rechner.js"></script>
</head>

<body>
<form>
<fieldset>
<legend>Gewässergütebestimmung</legend>
<table>

<tr><th>Saprobiewert
<th>Gewichtung
<th>Anzahl

<tr><td><input type="text" name="wert11" id="wert11" onkeyup="form_calculate();">
<td><input type="text" name="wert12" id="wert12" onkeyup="form_calculate();">
<td><input type="text" name="wert13" id="wert13" onkeyup="form_calculate();">

<tr><td><input type="text" name="wert21" id="wert21" onkeyup="form_calculate();">
<td><input type="text" name="wert22" id="wert22" onkeyup="form_calculate();">
<td><input type="text" name="wert23" id="wert23" onkeyup="form_calculate();">

<tr><td><input type="text" name="wert31" id="wert31" onkeyup="form_calculate();">
<td><input type="text" name="wert32" id="wert32" onkeyup="form_calculate();">
<td><input type="text" name="wert33" id="wert33" onkeyup="form_calculate();">

</table>

<input type="text" name="result" id="result"><br>

</fieldset>
</form>
</body>
</html>

Und im Script steht das:

function form_calculate()

{

var wert11 = Number(document.getElementById('wert11').value);

var wert12 = Number(document.getElementById('wert12').value);

var wert13 = Number(document.getElementById('wert13').value);

var wert21 = Number(document.getElementById('wert21').value);

var wert22 = Number(document.getElementById('wert22').value);

var wert23 = Number(document.getElementById('wert23').value);

var wert31 = Number(document.getElementById('wert31').value);

var wert32 = Number(document.getElementById('wert32').value);

var wert33 = Number(document.getElementById('wert33').value);

var wert41 = Number(document.getElementById('wert41').value);

var wert42 = Number(document.getElementById('wert42').value);

var wert43 = Number(document.getElementById('wert43').value);

var wert51 = Number(document.getElementById('wert51').value);

var resultField = document.getElementById('result');

var result = wert11*wert12;

resultField.value = result;

}

Es hat schon einmal funktioniert. Allerdings geht es seit ich die Rechenoperation von einem einfachen "plus" auf die gesamte Operation erweitern wollte plötzlich nicht mehr. Ein Mischen von Addition und Multiplikation ging allerdings noch.

Unbefüllte Felder sollen mit 0 in die Rechnung aufgenommen werden. Ist das schon standardmäßig so oder muss ich da etwas ergänzen?

Grüßle Felix

DKK007 · 9. Dezember 2016

Du kannst im HTML-Code die Felder mit 0 befüllen.

value="0"

rtf · 9. Dezember 2016

Habe dein Script ausprobiert und es hat bei mir auch nicht funktioniert.

Andere Frage, war es beabsichtigt das die folgenden IDs noch im JS drin waren, die fehlen in deinem HTML Quellcode? -> Darum rechnet das Script auch nicht

var wert41 = Number(document.getElementById('wert41').value);

var wert42 = Number(document.getElementById('wert42').value);

var wert43 = Number(document.getElementById('wert43').value);

var wert51 = Number(document.getElementById('wert51').value);

nehm ich die aus den JS raus funktioniert es soweit wie du programmiert hast.

Nein du bekommst da keine 0 in die Felder sondern ein 'undefined' sprich hier musst das noch angepasst werden.
Ich verstehe nicht ganz was du hier berechnen möchtest :huh:

lozux · 9. Dezember 2016

Vielen Dank! Hatte die Felder im Script schon vorbereitet aber im HTML Code noch nicht gemacht.

Das Skript soll den sog. "Saprobienindex" errechnen.

S= "Summe" A*s*G/"Summe" A*G

Da man für die Variablen Anzahl (A), Saprobienwert (s) und Gewichtung (G) Werte einsetzen muss, habe ich die Summe ausgeschrieben.

Da ganze ist eine Form der Gewässergüteuntersuchung. Man sucht Kleinlebewesen im Gewässer, schaut in der Tabelle den jeweiligen Saprobienwert nach und die Gewichtung, und trägt alles mit der Anzahl der gefundenen Individuen in die Tabelle ein.

Die Formel errechnet dann für einen das Ergebnis.

lozux · 12. Dezember 2016

Nachtrag:

Stoße schon auf das nächste Problem. Integration der Favicons.

Hab über The ultimate favicon generator - Favic-o-Matic den Code und die PNG/Ico´s erstellt und einige Zeilen hinzugefügt:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Pfade sind alle korrekt, die Icons liegen im Rootverzeichnis der Seite.

Dargestellt wird in IE 11.0.37 gar nichts.

Die Daten liegt lokal auf meiner Platte.

Bitte um Hilfe,

Grüße Lozux

lozux · 13. Dezember 2016

Push!

ZAM · 20. Dezember 2016

Die Daten liegt lokal auf meiner Platte.

Das wird für den IE beim lokalen Test vermutlich auch das "Problem" sein, wenn der Aufruf über file:/// passiert.

*Edit*
Und was den restlichen Code angeht - probiers mal so - dann brauchst du das Javascript nicht mehr anfassen, wenn du neue Zeilen im Formular hinzufügst.

PHP:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta http-equiv="Content-Type" value="text/html" />
    <meta charset="UTF-8" />
<script>
    window.onload = function() {

        function form_calculate() {

            var iMax = document.forms[0]["sap[]"].length,
                    iSummeASG = 0,
                    iSummeAG = 0;

            for ( var i = 0; i < iMax; i++ ) {
                var iSap = Number(document.forms[0]["sap[]"][i].value),
                    iGew = Number(document.forms[0]["gew[]"][i].value),
                    iAnz = Number(document.forms[0]["anz[]"][i].value);

                iSummeASG += (iAnz*iSap*iGew);
                iSummeAG += (iAnz*iGew);
            }

            document.getElementById("result").innerText = Number(iSummeASG/iSummeAG);

        }

        var oWerte = document.getElementsByClassName("werte");
        if (typeof oWerte != undefined && oWerte.length) {
            for (var idx in oWerte) {
                if (oWerte.hasOwnProperty(idx)) {
                    oWerte[idx].addEventListener("change", form_calculate);
                    oWerte[idx].addEventListener("keyup", form_calculate);
                }
            }
        }
    }
</script>
</head>
<body>
<form>
    <fieldset>
        <legend>Gewässergütebestimmung</legend>
        <table>
            <tr>
                <th>Saprobiewert</th>
                <th>Gewichtung</th>
                <th>Anzahl</th>
            </tr>
            <tr>
                <td><input type="number" min="0" class="werte" name="sap[]" value="0" /></td>
                <td><input type="number" min="0" class="werte" name="gew[]" value="0" /></td>
                <td><input type="number" min="0" class="werte" name="anz[]" value="0" /></td>
            </tr>
            <tr>
                <td><input type="number" min="0" class="werte" name="sap[]" value="0" /></td>
                <td><input type="number" min="0" class="werte" name="gew[]" value="0" /></td>
                <td><input type="number" min="0" class="werte" name="anz[]" value="0" /></td>
            </tr>
            <tr>
                <td><input type="number" min="0" class="werte" name="sap[]" value="0" /></td>
                <td><input type="number" min="0" class="werte" name="gew[]" value="0" /></td>
                <td><input type="number" min="0" class="werte" name="anz[]" value="0" /></td>
            </tr>
        </table>
        Ergebnis: <span id="result"></span><br />
    </fieldset>
</form>
</body>
</html>

Einfaches Javascript funktioniert nicht mehr

lozux

Software-Overclocker(in)

DKK007

PCGH-Community-Veteran(in)

rtf

PC-Selbstbauer(in)

lozux

Software-Overclocker(in)

lozux

Software-Overclocker(in)

lozux

Software-Overclocker(in)

ZAM

Inventar

Ähnliche Themen