<!DOCTYPE html> <html> <head> <title>Rechner zwischen Brutto-Netto-KoLe</title> <link rel="stylesheet" href="https://wtf-eg.de/css/style.css?h=56fa462e"/> <style> <!-- @media only screen { } --> @media only screen and (max-width: 600px){ body #wrap { font-size: 2.1em; } input[type='number'],input+label { display: block;} } @media only screen and (min-width: 768px){ label { display:inline-block; width: 12ex; } body #wrap { font-size: 1.2em; } } <!-- body { font-family: sans-serif; } --> #wrap { display: inline-block; } div fieldset{ margin: 0 auto; max-width: 50ex; padding: 2ex; } legend{ margin-bottom: 0px; } .radiogroup > legend{ min-width: 20ex; display: inline-block; float: left; } .radiogroup > label{ display: inline; } label{ min-width: 20ex; } input[type='number']{text-align:right;} input[readonly='readonly']{background-color:#eee;} h1{ font-size: 2em; text-align: center; margin: 1ex auto 2ex auto; } </style> </head> <body> <div id="#wrap"> <h1>Rechner zwischen Brutto-Netto-KoLe</h1> <noscript> Dieser Rechner ist auf JavaScript angewiesen! </noscript> <fieldset> <legend></legend> <section class="radiogroup"> <legend>Eingangsgröße</legend> <input accesskey="b" type="radio" name="b" value="e" id="bb" class="bb" checked="checked"/><label for="bb"><u>B</u>rutto</label><input accesskey="n" type="radio" name="b" value="b" id="bn" class="bb"/><label for="bn"><u>N</u>etto</label><input accesskey="k" type="radio" name="b" value="k" id="bk" class="bb"/><label for="bk"><u>K</u>oLe</label> </section> <section> <div> <label for="e">Br<u>u</u>tto</label> <input accesskey="u" type="number" step="0.01" id="e" value="100.00"/> € </div> <div> <label for="u">Umsatzsteuersatz</label> <input type="number" step="0.01" id="u" value="19.00"/> % </div> <div> <label for="us">Umsatzsteuer</label> <input readonly="readonly" type="number" step="0.01" id="us" value="0.00"/> € </div> <div> <label for="n">N<u>e</u>tto</label> <input accesskey="e" type="number" step="0.01" id="n" value="0.00"/> € </div> <div> <label for="z">Entropieumlagesatz</label> <input type="number" step="0.01" id="z" value="23.00"/> % </div> <div> <label for="eu">Entropieumlage</label> <input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/> € </div> <div> <label for="k">K<u>o</u>Le</label> <input accesskey="o" type="number" step="0.01" id="k" value="0.00"/> € </div> </section> <section> <button accesskey="c" id="b" type="button">Bere<u>c</u>hnen</button> </section> </fieldset> <script> var e=document.getElementById('e'); var u=document.getElementById('u'); var us=document.getElementById('us'); var n=document.getElementById('n'); var z=document.getElementById('z'); var eu=document.getElementById('eu'); var k=document.getElementById('k'); var bb=document.getElementById('bb'); var bn=document.getElementById('bn'); var bk=document.getElementById('bk'); var s = document.getElementById('b'); function getFormFloat(f){ return parseFloat(f.value); } function roundCents(f){ return f.toFixed(2); } s.addEventListener('click', function(){ if(bk.checked){ e.value = roundCents( getFormFloat(k) * ( 1 + getFormFloat(u) / 100 ) / ( 1 - getFormFloat(z) / 100 ) ); n.value = roundCents( getFormFloat(k) / ( 1 - getFormFloat(z) / 100 ) ); }else if(bb.checked){ k.value = roundCents( getFormFloat(e) / ( 1 + getFormFloat(u) / 100 ) * ( 1 - getFormFloat(z) / 100 ) ); n.value = roundCents( getFormFloat(e) / ( 1 + getFormFloat(u) / 100 ) ); }else if(bn.checked){ e.value = roundCents( getFormFloat(n) * ( 1 + getFormFloat(u) / 100 ) ); k.value = roundCents( getFormFloat(n) * ( 1 - getFormFloat(z) / 100 ) ); } us.value = roundCents(e.value * getFormFloat(u) / 100 ); eu.value = roundCents(n.value * getFormFloat(z) / 100 ); }); e.addEventListener('change', function(){bb.checked = true;}); n.addEventListener('change', function(){bn.checked = true;}); s.click(); </script> </div> </body> </html>