Kod:
<!DOCTYPE html>
<html lang="sv" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Dags att spara pengar </title>
</head>
<body>
<p><b>Lill Eriks El-Bils Kalkyl</b></p>
<br /><br />
<script type="text/javascript">
calculate();
function calculate() {
try {
var a = parseFloat(document.getElementById('a').value.replace(',', '.'));
var b = parseFloat(document.getElementById('b').value.replace(',', '.'));
var c = parseFloat(document.getElementById('c').value.replace(',', '.'));
var d = parseFloat(document.getElementById('d').value.replace(',', '.'));
var e = parseFloat(document.getElementById('e').value.replace(',', '.'));
var f = parseFloat(document.getElementById('f').value.replace(',', '.'));
var g = parseFloat(document.getElementById('g').value.replace(',', '.'));
var h = parseFloat(document.getElementById('h').value.replace(',', '.'));
var i = parseFloat(document.getElementById('i').value.replace(',', '.'));
var j = parseFloat(document.getElementById('j').value.replace(',', '.'));
document.getElementById('z').innerHTML = (e * (f * g)).toFixed(2).toString().replace(/\B(?<!\.\d*)(?:(\d{3})+(?!\d))/g, ' ').replace(/[.]/, ',');
document.getElementById('q').innerHTML = (e * (f * g) + h + i).toFixed(2).toString().replace(/\B(?<!\.\d*)(?:(\d{3})+(?!\d))/g, ' ').replace(/[.]/, ',');
document.getElementById('x').innerHTML = (a * b).toFixed(2).toString().replace(/\B(?<!\.\d*)(?:(\d{3})+(?!\d))/g, ' ').replace(/[.]/, ',');
document.getElementById('y').innerHTML = (c + d + (a * (b * e))).toFixed(2).toString().replace(/\B(?<!\.\d*)(?:(\d{3})+(?!\d))/g, ' ').replace(/[.]/, ',');
document.getElementById('p').innerHTML = (a * b * e).toFixed(2).toString().replace(/\B(?<!\.\d*)(?:(\d{3})+(?!\d))/g, ' ').replace(/[.]/, ',');
document.getElementById('m').innerHTML = (a * b * e).toFixed(2).toString().replace(/\B(?<!\.\d*)(?:(\d{3})+(?!\d))/g, ' ').replace(/[.]/, ',');
document.getElementById('M5').innerHTML = (a * b * e).toFixed(2).toString().replace(/\B(?<!\.\d*)(?:(\d{3})+(?!\d))/g, ' ').replace(/[.]/, ',');
document.getElementById('P5').innerHTML = (a * b * e).toFixed(2).toString().replace(/\B(?<!\.\d*)(?:(\d{3})+(?!\d))/g, ' ').replace(/[.]/, ',');
}
catch (err) {
alert(err.message);
}
}
</script>
<table>
<tr>
<th colspan="2">
Nuvarande fosilbil
</th>
</tr>
<tr>
<td>
<label for="a">Skriv in Dags Aktuellt Bränslepris:</label>
</td>
<td>
<input type="number" id="a" value="24" oninput="calculate();">
</td>
</tr>
<tr>
<td>
<label for="b">Vad drar er bil i dag:</label>
</td>
<td>
<input type="number" id="b" value="25" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="c">Bilskatt:</label>
</td>
<td>
<input type="number" id="c" value="500" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="d">Kostnad för Service o Rep:</label>
</td>
<td>
<input type="number" id="d" value="25" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="e">Körsträcka per år:</label>
</td>
<td>
<input type="number" id="e" value="25" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="x">Bränsle kostnad per år ::</label>
</td>
<td>
<span name="x" /><br /><br />
</td>
</tr>
<tr>
<td>
<label for="y" style="font-size:20px;color:red"> <b>Toal kostnad per år</b> ::</label>
</td>
<td>
<b><span name="y" /></b>
</td>
</tr>
</table>
<br /><br /><br />
<table>
<tr>
<th colspan="2">
Er nya El-bil ️
</th>
</tr>
<tr>
<td>
<label for="f">Skriv in elpris ink nätavgift:</label>
</td>
<td>
<input type="number" id="f" value="1.3" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="g">Elbilens förbrukning:</label>
</td>
<td>
<input type="number" id="g" value="1.4" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="h">Bilskatt:</label>
</td>
<td>
<input type="number" id="h" value="360" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="i">Kostnad för Service o Rep:</label>
</td>
<td>
<input type="number" id="i" value="3500" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="j">Mängd gratisladdning i %:</label>
</td>
<td>
<input type="number" id="j" value="5" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
</tr>
<tr>
<td>
<label for="z">El kostnad per år ::</label>
</td>
<td>
<span id="z" /><br /><br />
</td>
</tr>
<tr>
<td>
<label for="q" style="font-size:20px;color:red"> <b>Toal kostnad per år</b> ::</label>
</td>
<td>
<span id="q" /><br /><br />
</td>
</table>
<br />
<br />
<br />
<style>
table, th, td {
border: 1px solid green;
}
</style>
<h1>Jag Sparar per månad</h1>
<table>
<tr>
<th>om jag bara laddar hemma</th>
<th>laddar hemma och % gratis</th>
</tr>
<tr>
<th>Ej i bruk ännu</th>
<th>Ej i bruk ännu</th>
</tr>
</table>
<br /><br /><br />
<h1>Jag Sparar per År</h1>
<table>
<tr>
<th>om jag bara laddar hemma</th>
<th>laddar hemma och % gratis</th>
</tr>
<tr>
<th><span name="p" /></th>
<th>Fel uträkning</th>
</tr>
</table>
<br /><br /><br />
</body>