<form class="form">
<input class="btn btn-primary form-control" id="aquaGravelCalcRefreshButton" onclick="refresh();" type="button" value="Aktualisieren" />
</form>
Sie benötigen x Liter Kies.
<script type="text/javascript">
var inputFieldStates = [false,false,false];
// Def of Text
var translations = {
de : {
title : "Aquarienkies-Rechner",
width : "Breite (A) in cm",
depth : "Tiefe (B) in cm",
heigth : "Kieshöhe (C) in cm",
recommendation : "6",
button : "Berechnen",
result : "Sie benötigen $1 Liter Kies.",
error : "Bitte geben Sie eine Zahl ein.",
decimalSeparator: ","
}
};
var textToUse = translations.de;
//
function replaceTranslations() {
document.getElementById("aquaGravelCalcTitle").innerHTML = textToUse.title;
document.getElementById("aquaGravelCalcWidthLabel").innerHTML = textToUse.width;
document.getElementById("aquaGravelCalcDepthLabel").innerHTML = textToUse.depth;
document.getElementById("aquaGravelCalcHeightLabel").innerHTML = textToUse.heigth;
document.getElementById("aquaGravelCalcWidthInputAdvice").innerHTML = textToUse.error;
document.getElementById("aquaGravelCalcDepthInputAdvice").innerHTML = textToUse.error;
document.getElementById("aquaGravelCalcHeightInputAdvice").innerHTML = textToUse.error;
document.getElementById("aquaGravelCalcHeightInput").value = textToUse.recommendation;
document.getElementById("aquaGravelCalcRefreshButton").value = textToUse.button;
}
replaceTranslations();
var aquaGravelCalcWidthId = "aquaGravelCalcWidthInput";
var aquaGravelCalcDepthId = "aquaGravelCalcDepthInput";
var aquaGravelCalcHeightId = "aquaGravelCalcHeightInput";
var aquaGravelCalcWidthInput = document.getElementById(aquaGravelCalcWidthId);
var aquaGravelCalcDepthInput = document.getElementById(aquaGravelCalcDepthId);
var aquaGravelCalcHeightInput = document.getElementById(aquaGravelCalcHeightId);
function refresh() {
checkValue(aquaGravelCalcWidthInput);
checkValue(aquaGravelCalcDepthInput);
checkValue(aquaGravelCalcHeightInput);
}
function placeAdvice(htmlObj, result) {
var adviceStyle = document.getElementById(htmlObj.id+'Advice').style;
switch (result) {
/*
case null:
adviceStyle.setProperty ("display", "none", null);
//document.getElementById(htmlObj.id+'Advice').style="display:none;";
break;
*/
case true:
adviceStyle.setProperty ("display", "none", null);
//document.getElementById(htmlObj.id+'Advice').style="display:none;";
break;
default:
adviceStyle.setProperty ("display","block",null);
//document.getElementById(htmlObj.id+'Advice').style="display:block;";
break;
}
}
function checkValue(htmlObj) {
hideResult();
if (
typeof(htmlObj) == "object"
&& htmlObj.value == ""
) {
placeAdvice(htmlObj, null);
setInputFieldStates (htmlObj.id, false);
} else if (
typeof(htmlObj) == "object"
&& htmlObj.value != ""
&& /^([0-9]+)$/.test(htmlObj.value)
) {
placeAdvice(htmlObj, true);
setInputFieldStates (htmlObj.id, true);
} else {
placeAdvice(htmlObj, false);
setInputFieldStates (htmlObj.id, false);
}
}
function setInputFieldStates (id, value) {
switch (id) {
case aquaGravelCalcWidthId:
inputFieldStates[0] = value || false;
break;
case aquaGravelCalcDepthId:
inputFieldStates[1] = value || false;
break;
case aquaGravelCalcHeightId:
inputFieldStates[2] = value || false;
break;
}
if (inputFieldStates.indexOf(false) == -1) {
calcResult();
}
}
function calcResult() {
var result = (aquaGravelCalcWidthInput.value * aquaGravelCalcDepthInput.value * aquaGravelCalcHeightInput.value / 1000).toFixed(2);
var resultText = textToUse.result.replace(/\$1/g, result.replace(/\./,textToUse.decimalSeparator));
document.getElementById("aquaGravelCalcResult").innerHTML = resultText;
var resultStyle = document.getElementById("aquaGravelCalcResult").style;
resultStyle.setProperty('display', 'block', null);
resultStyle.setProperty('font-size', '200%', null);
}
function hideResult() {
var resultStyle = document.getElementById("aquaGravelCalcResult").style;
resultStyle.setProperty('display', 'none', null);
}
</script>