Brennholz-Rechner: Heizwert und Raummeter berechnen

Dieser Brennholz-Rechner ist die einfachste Art den Heizwert seines Brennholzes zu bestimmen. Andersrum geht es auch, denn die Eingabe des gewünschten Heizwerts spuckt die benötigte Menge des bevorzugten Holzes aus. Den Brennholz-Rechner habe ich in Java-Script programmiert, denn ich habe ihn selbst gebraucht. Viel Spaß damit!

Brennholz-Rechner



Wie programmiert man einen Rechner?

Die Eingaben über ein HTML-Formular

Alles beginnt mit einem HTML-Formular, das aus einfachen Eingabefeldern und Dropdown-Listen besteht.

<label class="form">Holzart</label>
<select id="holzart" class="form change">
<option value="1432">Ahorn</option>
<option value="1582">Birke</option>
<option value="1711" selected="selected">Buche</option>
</select>

<label class="form">Maßeinheit</label>
<select id="holzmengefaktor" class="form change">
<option value="1">Raummeter (Rm)</option>
<option value="0.65">Schüttraummeter (Srm)</option>
</select>

<label class="form">Menge</label>
<input type="number" step="0.1" id="holzmenge" class="form change">

<label class="form">Heizwert (kWh)</label>
<input type="number" id="energie" class="form change">

Jeder Option der Holzart-Liste habe ich eine Wert (value) zugewiesen. Es handelt sich um die Heizwerte der verschiedenen Holzarten, die man nach kurzer Recherche im Internet findet.

Der Auswahlliste Maßeinheit habe ich einen Umrechnungfaktor hinzugefügt. Ein Schüttraummeter entspricht 0,65 Raummeter Brennholz.

Die Logik per JavaScript

Die Verkünpfung zu den Eingabefeldern habe ich in Variablen gespeichert, um schneller auf ihre Werte zugreifen zu können.

var holzart = document.getElementById("holzart");
var holzmenge = document.getElementById("holzmenge");
var holzmengefaktor = document.getElementById("holzmengefaktor");
var energie = document.getElementById("energie");

Sobald sich ein Eingabefeld ändert, soll das Script automatisch die Werte neu berechnet. Dafür nutze ich zwei EventListener, die bei Änderung eines Eingabefeldes (change) oder beim Loslassen einer Taste (keyup) die Funktion changed aufrufen.

var elements = document.getElementsByClassName("change");
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("change", changed);
  elements[i].addEventListener("keyup", changed);
}

Zum Schluss folgt noch das Herzstück, also die Funktion changed, die alle Berechnungen übernimmt.

function changed(evt)
{
  if(holzmenge.value.length && (evt.target.id=="holzmenge" || evt.target.id=="holzmengefaktor" || evt.target.id=="holzart"))
  {
    energie.value = Math.round(holzmenge.value*holzmengefaktor.value*holzart.value);
  }
  else if(energie.value.length && (evt.target.id=="energie" || evt.target.id=="holzmengefaktor"))
  {
    holzmenge.value = Math.round(energie.value/holzart.value/holzmengefaktor.value*10)/10;
  }
  return false;
}

Die Funktion unterscheidet zwei Fälle. Wenn in das Holzmenge-Eingabefeld etwas eingetragen wurde und das Ereignis vom Holzmengen- oder Maßeinheiten-Eingabefeld ausgelöst wurde, dann wird die Heizenergie berechnet und dem entsprechenden Feld zugewiesen. Die Holzmenge wird mit dem Faktor der Maßeinheit und dem Heizwert der Holzart multipliziert. Der zweite Fall wird die Holzmenge berechnet. Die Rückgabe eines false ist wichtig, damit die Funktion nicht doppelt ausgeführt wird, was durch die zwei EventListener passieren könnte.

Der Style per CSS

Zu guter Letzt fehlt noch eine ansprechende Optik. Hier habe ich mich für die schnelle Variante entschieden, indem ich das Form Framework genutzt habe. Zusätzlich ein paar Zeilen eigener CSS-Code für die Box mit Hintergrundfarbe und die richtigen Abstände und schon ist der Brennholz-Rechner fertig!

Weitere interessante Beiträge

Eigenen Blog nachhaltig selbst hosten

Jeder der einen eigenen Blog oder eine Webseite erstellen will und dabei auf Nachhaltigkeit Wert legt, steht vor einer Herausforderung.

Nachhaltiges Webhosting - Echter Ökostrom im Rechenzentrum

Heute kommt kein Unternehmen oder Selbstständiger mehr ohne eine Webseite aus. Doch damit der eigene Internetauftritt 24 Stunden jeden Tag erreichbar ist, muss ein Webserver betrieben werden.