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 />
<table>
<table style="width:500px" >
<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="25,31" oninput="calculate();">
</td>
</tr>
<tr>
<td>
<label for="b">Vad drar er bil i dag:</label>
</td>
<td>
<input type="number" id="b" value="0,6" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="c">Bilskatt:</label>
</td>
<td>
<input type="number" id="c" value="2500" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="d">Års-Kostnad för<br /> Service o Rep:</label>
</td>
<td>
<input type="number" id="d" value="4000" 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="2000" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="x" style= ><b>Bränsle kostnad per år ::</b></label>
</td>
<th>
<span id="x" /><br /><br />
</th>
</tr>
<tr>
<td>
<label for="y" style="font-size:20px;color:red"> <b>Toal kostnad per år</b> </label>
</td>
<th>
<b><span id="y" style="font-size:20px;color:red" /></b>
</th>
</tr>
</table>
<br /><br /><br />
<table>
<table style="width:500px" >
<tr>
<th colspan="2">
Er nya Elbil
</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">Års-Kostnad för<br /> Service o Rep:</label>
</td>
<td>
<input type="number" id="i" value="4500" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
<label for="j">Mängd gratisladdning i %:</label>
</td>
<td>
<input type="number" id="j" value="25" oninput="calculate();"><br /><br />
</td>
</tr>
<tr>
<td>
</tr>
<tr>
<td>
<label for="z" style=><b>El kostnad per år ::</b></label>
</td>
<th>
<span id="z" /><br /><br />
</th>
</tr>
<tr>
<td>
<label for="q" style="font-size:20px;color:green"> <b>Toal kostnad per år</b> </label>
</td>
<th>
<b><span id="q" style="font-size:20px;color:green" /><br /><br /></b>
</th>
</table>
<br />
<br />
<br />
<style>
table, th, td {
border: 1px dotted green;
}
</style>
<table style="width:500px" >
<tr>
<th colspan="2" style="font-size:26px;color:black">
Jag Sparar per månad om jag</th>
<tr>
<th><label for="p" >Enbart laddar hemma</label></th>
<th><label for="m" >Laddar hemma och % gratis</label></th>
</tr>
<tr>
<th><span id="p" style="font-size:20px;color:green" /></th>
<th><span id="m" style="font-size:20px;color:green" /></th>
</tr>
</table>
<br /><br /><br />
<table style="width:500px" >
<tr>
<th colspan="2" style="font-size:26px;color:black">
Jag Sparar per År om jag</th>
<tr>
<th><label for="P5" >Enbart laddar hemma</label></th>
<th><label for="o" >Laddar hemma och % gratis</label></th>
</tr>
<tr>
<th><span id="P5" style="font-size:20px;color:green" /></th>
<th><span id="o" style="font-size:20px;color:green" /></th>
</tr>
</table>
<br /><br /><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 = ((f*g*e).toFixed(0)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",").replace(/,/g,' ').replace('.',',');
document.getElementById('q').innerHTML = ((f*g*e+h+i).toFixed(0)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",").replace(/,/g,' ').replace('.',',');
document.getElementById('x').innerHTML = ((a*b*e).toFixed(0)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",").replace(/,/g,' ').replace('.',',');
document.getElementById('y').innerHTML = ((c+d+a*b*e).toFixed(0)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",").replace(/,/g,' ').replace('.',',');
document.getElementById('p').innerHTML = ((((c+d+a*b*e)-(f*g*e+h+i))/12).toFixed(0)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",").replace(/,/g,' ').replace('.',',');
document.getElementById('m').innerHTML = ((((c+d+a * b * e) - ((f * g * e + h + i) - (f * g * e * j / 100))) / 12)).toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",").replace(/,/g,' ').replace('.',',');
document.getElementById('o').innerHTML = ((c+d+a*b*e)-(((f*g*e+h+i)-(f*g*e*j/100))).toFixed(0)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",").replace(/,/g,' ').replace('.',',');
document.getElementById('P5').innerHTML = (((c+d+a*b*e)-(f*g*e+h+i)).toFixed(0)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",").replace(/,/g,' ').replace('.',',');
}
catch (err) {
alert(err.message);
}
}
</script>
</body>
</html>
Jag fann två saker när jag granskade det senare på kvällen: