Mega hässlicher Code...zwei Fehler erscheinen direkt in der Konsole. Benutz sie doch, dafür ist sie u.a. da.
Einmal schreibst du ParseFloat, statt parseFloat. Und einmal benutzt du math_random? Ich nehme an du meintest Math.round()?
Dann werden mir auch Montagekosten berechnet.
Du kannst übrigens die ganzen Funktionen in ein <script></script> Block schreiben.
Ich hoffe das ist nur ein Schulprojekt/Hausaufgabe. Wenn du willst kann ich dir mit dem Code auch helfen.
HTML Code:
<article id="leicht">
<h4 class="major">Aluminium Panzer</h4>
<span class="image main"></span>
<center>
<form name="form1" method="post" action=""
oninput="result.value = (parseFloat (numA.value * numB.value / 1000000)).toFixed(2); result2.value = (parseFloat ( result.value * 5.5 )).toFixed(2); result3.value = (parseFloat ( result2.value / 0.45 * ( 25/100 ) )).toFixed(2); result4.value = (parseFloat(result.value * 95)).toFixed(2); result5.value = (parseFloat(result4.value) + parseFloat(((select.value) * 59) )).toFixed(2); result6.value = (parseFloat(result4.value) + parseFloat(selecti.value)).toFixed(2); result7.value = (parseInt(result4.value) + parseInt(selecti.value) + parseFloat(select.value * 59)).toFixed(2);result8.value = (parseFloat(result7.value) * parseFloat(1.19)).toFixed(2); Math.round(result3.value,2)">
<br>
Breite des Rollladens (mm) je m2 95€:
<br>
<input style="color: #0000ff;" name="numA" type="number"><br>
Höhe des Rollladens (mm):
<br>
<input style="color: #0000ff;" name="numB" type="number">
<br><br>
Benötigte Arbeitszeit (65€ je Std.):
<select name="select" id="select" onchange="makeChange()">
<option value="0" selected>0</option>
<option value="0.5">0,5</option>
<option value="1">1,0</option>
<option value="1.5">1,5</option>
<option value="2">2</option>
<option value="2.5">2,5</option>
<option value="3">3</option>
</select>
<br>Mit Antrieb:
<select name="selecti" id="selecti" onchange="makeChangeSelecti()">
<option value="0" selected>kein Antrieb</option>
<option value="250">WT ohne Uhr</option>
<option value="380">WT mit Uhr</option>
<option value="320">RTS ohne Sender</option>
<option value="400">RTS mit Sender</option>
<option value="350">IO ohne Sender</option>
<option value="450">IO mit Sender</option>
</select>
<br>
<output name="result"></output> <b>m2</b>
<output name="result2"></output> <b>Kg</b>
<output name="result3" style="visibility: hidden;"></output>
<b><br><a href="/nm/index.html">NM berechnen!</a></b>
<br><br>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Material</th>
<th>Preis</th>
<th>€</th>
<th>B/N</th>
</tr>
</thead>
<tbody>
<tr>
<td><b> Panzer:</b></td>
<td><output name="result4"></output></td>
<td>€</td>
<td>Netto</td>
</tr>
<tr>
<td><strong>Montagekosten:</strong></td>
<td><span id="preis"></span></td>
<td>€</td>
<td>Netto</td>
</tr>
<tr>
<td><b>Zwischensumme 1:</b></td>
<td><output name="result5"></output></td>
<td>€</td>
<td>Netto</td>
</tr>
<tr>
<td><strong>Antriebskosten:</strong></td>
<td><span id="preisi"></span></td>
<td>€</td>
<td>Netto</td>
</tr>
<tr>
<td><b>Zwischensumme 2: </b></td>
<td><output name="result6"></output></td>
<td>€</td>
<td>Netto</td>
</tr>
<tr>
<td><b>Gesamt Zwischensumme:</b></td>
<td><output name="result7"></output></td>
<td>€</td>
<td>Netto</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><b>Gesamtkosten:</b></td>
<td><output name="result8"></output></td>
<td>€</td>
<td>Brutto</td>
</tr>
</tfoot>
</table>
</form>
</center>
</article>
<script type="text/javascript">
function makeChangen() {
var sbn = document.getElementById("selectn");
var preisn = parseFloat(sbn.options[sbn.selectedIndex].value) * 65;
document.getElementById("preisn").innerHTML = preisn.toFixed(2);
}
function makeChange() {
var sb = document.getElementById("select");
var preis = parseFloat(sb.options[sb.selectedIndex].value) * 65;
document.getElementById("preis").innerHTML = preis.toFixed(2);
}
function makeChangee() {
var sbe = document.getElementById("selecte");
var preise = parseFloat(sbe.options[sbe.selectedIndex].value) * 65;
document.getElementById("preise").innerHTML = preise.toFixed(2);
}
function makeChangeee() {
var sbee = document.getElementById("selectee");
var preisee = parseFloat(sbee.options[sbee.selectedIndex].value);
document.getElementById("preisee").innerHTML = preisee.toFixed(2);
}
function makeChange45() {
var sb45 = document.getElementById("select45");
var preis45 = parseFloat(sb45.options[sb45.selectedIndex].value);
document.getElementById("preis45").innerHTML = preis45.toFixed(2);
}
function makeChange46() {
var sb46 = document.getElementById("select46");
var preis46 = parseFloat(sb46.options[sb46.selectedIndex].value);
document.getElementById("preis46").innerHTML = preis46.toFixed(2);
}
function makeChangemit() {
var sbmit = document.getElementById("selectmit");
var preismit = parseFloat(sbmit.options[sbmit.selectedIndex].value);
document.getElementById("preismit").innerHTML = preismit.toFixed(2);
}
function makeChangeSelecti() {
var sbi = document.getElementById("selecti");
var preisi = parseFloat(sbi.options[sbi.selectedIndex].value);
document.getElementById("preisi").innerHTML = preisi.toFixed(2);
}
function makeChangeSelectin() {
var sbin = document.getElementById("selectin");
var preisin = parseFloat(sbin.options[sbin.selectedIndex].value);
document.getElementById("preisin").innerHTML = preisin.toFixed(2);
}
function makeChangeSelectie() {
var sbie = document.getElementById("selectie");
var preisie = parseFloat(sbie.options[sbie.selectedIndex].value);
document.getElementById("preisie").innerHTML = preisie.toFixed(2);
}
function makeChangeSelectiee() {
var sbiee = document.getElementById("selectiee");
var preisiee = parseFloat(sbiee.options[sbiee.selectedIndex].value);
document.getElementById("preisiee").innerHTML = preisiee.toFixed(2);
}
</script>
Hatte eben Langeweile und habe dir mal was geschrieben. Die Rechnungen solltest du nochmal überprüfen, je m2 95€ hab ich nicht beachtet fällt mir grad auf.
HTML Code:
<div class="container">
<h4>Aluminium Panzer</h4>
<form id="formular-berechnung" method="post" action="">
<label for="numA">Breite des Rollladens (mm) je m2 95€:</label>
<input class="blue-input" id="rolladenBreite" name="numA" type="number">
<br>
<label for="numB">Höhe des Rollladens (mm):</label>
<input class="blue-input" id="rolladenHoehe" name="numB" type="number">
<br>
<label for="arbeitszeit"> Benötigte Arbeitszeit (65€ je Std.): </label>
<select name="arbeitszeit" id="arbeitszeit">
<option value="0" selected>0</option>
<option value="0.5">0,5</option>
<option value="1">1,0</option>
<option value="1.5">1,5</option>
<option value="2">2</option>
<option value="2.5">2,5</option>
<option value="3">3</option>
</select>
<br>
<label for="antrieb">Mit Antrieb:</label>
<select name="antrieb" id="antrieb">
<option value="0" selected>kein Antrieb</option>
<option value="250">WT ohne Uhr</option>
<option value="380">WT mit Uhr</option>
<option value="320">RTS ohne Sender</option>
<option value="400">RTS mit Sender</option>
<option value="350">IO ohne Sender</option>
<option value="450">IO mit Sender</option>
</select>
<p id="gesamtsumme"></p>
</form>
</div>
<script>
let breite = 0;
let hoehe = 0;
let arbeitszeitValue = 0;
let antriebValue = 0;
const rolladenBreite = document.getElementById("rolladenBreite");
rolladenBreite.addEventListener("input", () => {
breite = parseInt(rolladenBreite.value);
updateGesamtsumme();
console.log("Breite: ", breite);
});
const rolladenHoehe = document.getElementById("rolladenHoehe");
rolladenHoehe.addEventListener("input", () => {
hoehe = parseInt(rolladenHoehe.value);
updateGesamtsumme();
console.log("Höhe: ", hoehe);
});
const arbeitszeit = document.getElementById("arbeitszeit");
arbeitszeit.addEventListener("input", () => {
arbeitszeitValue = parseFloat(arbeitszeit.value) * 65;
updateGesamtsumme();
console.log("Arbeitszeit: ", arbeitszeitValue);
});
const antrieb = document.getElementById("antrieb");
antrieb.addEventListener("input", () => {
antriebValue = parseInt(antrieb.value);
updateGesamtsumme();
console.log("Antrieb: ", antriebValue);
});
const updateGesamtsumme = () => {
const gesamtsumme = breite + hoehe + arbeitszeitValue + antriebValue;
const summeElement = document.getElementById("gesamtsumme");
summeElement.innerText = `${gesamtsumme} EURO`;
};
</script>
<style>
select,
input {
margin: 10px;
}
.blue-input {
color: #0000ff;
}
.container {
margin-right: auto;
margin-left: auto;
text-align: center
}
</style>
