<!DOCTYPE html> <html> <head> <title>Rechner zwischen Brutto-Netto-KoLe</title> <link rel="stylesheet" href="https://wtf-eg.de/css/style.css"/> <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; } } #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; } #center_footer { display: flex; align-items: center; justify-content: center; } </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="ec">Entropie-Tarif</label><!-- ggf. künftig Grundlage wie Handbuch/Dokumentation verlinken --> <select id="ec"> <option value="l" accesskey="l" name="low">Umsatz ≤ 1.000 €</option><!-- low: <=1 TEUR --> <option value="h" accesskey="h" name="high">Umsatz > 1.000 €</option><!-- high: >1 TEUR --> <option value="c" accesskey="c" name="custom">nach Vereinbarung</option><!-- custom: separate agreement --> </select> </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="r" id="b" type="button">Be<u>r</u>echnen</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'); var c = document.getElementById('ec'); 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;}); c.addEventListener('change', function(){ var selInd=this.selectedIndex; console.log('Entropie-Tarif: '+selInd+'('+z.disabled+': '+z.value+')'); switch(selInd){ case 0: //low: <1.000 EUR revenue //23.0 % z.value='23.00'; z.disabled=true; break;; case 1: //high: >1.000 EUR revenue //11.5 % z.disabled=true; z.value='11.50'; break;; case 2: //custom: according toseparate agreement z.disabled=false; //~ z.focus(); break;; } }); // set entropy tax to standard value c.selectedIndex=0; z.value='23.00'; z.disabled=true; // calc s.click(); </script> <div id="center_footer"> <p>Der Quellcode befindet sich unter <a href="https://git.wtf-eg.de/wtf-eg/simplekolecalc">https://git.wtf-eg.de/wtf-eg/simplekolecalc</a>. </p> </div> </div> </body> </html>