<!DOCTYPE html>
<html>
<head>
<title>Vakantiehoeve/café</title>
<meta name="Author" content="Antoon Verroken">
<link href="CSS/style.css" rel="Stylesheet" type="text/css"/>
<style>
#reservatie{
margin-left: 120px;
}
.links{
float: left;
width: 250px;
}
#totprijs{
margin-top: 40px;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
}
#fotokosten{
text-align: center;
margin-top: 85px;
}
#IDbereken{
padding: 5px;
margin-top: 25px;
width: 470px;
text-align: center;
}
span{
float: right;
margin-right: 300px;
}
</style>
<script>
var basisweekend = 300;
var basisweek = 500;
var extravolweek = 20;
var extravolweekend = 10;
var kindweekend = 5;
var kindweek = 10;
var weekend;
var week;
var aantalvolw;
var aantalkinderen;
var bereken;
var prijsbasis;
var prijsvolw;
var prijskind;
var prijs;
function initieer() {
weekend = new getObj("IDbasisprijsweekend");
week = new getObj("IDbasisprijsweek");
aantalvolw = new getObj ("IDaantalvolw");
aantalkinderen = new getObj("IDaantalkind");
bereken = new getObj("IDbereken");
prijsbasis = new getObj("IDprijsbasis");
prijsvolw = new getObj("IDprijsvolw");
prijskind = new getObj("IDprijskind");
prijs = new getObj("IDprijs");
bereken.obj.onclick = afdrukken;
}
function afdrukken(){
if ((weekend.obj.checked)){
prijsbasis.obj.innerHTML = "€" + basisweekend;
prijsvolw.obj.innerHTML = "€" + aantalvolw.obj.value * extravolweekend;
prijskind.obj.innerHTML = "€" + aantalkinderen.obj.value * kindweekend;
var totprijs = parseInt(basisweekend) + parseInt(aantalvolw.obj.value * extravolweekend) + parseInt(aantalkinderen.obj.value * kindweekend);
prijs.obj.innerHTML = "€" + totprijs;
} else if (week.obj.checked){
prijsbasis.obj.innerHTML = "€" + basisweek;
prijsvolw.obj.innerHTML = "€" + aantalvolw.obj.value * extravolweek;
prijskind.obj.innerHTML = "€" + aantalkinderen.obj.value * kindweek;
var totprijs = parseInt(basisweek) + parseInt(aantalvolw.obj.value * extravolweek) + parseInt(aantalkinderen.obj.value * kindweek);
prijs.obj.innerHTML = "€" + totprijs;
} else {
alert("Maak een keuze dat je voor een weekend of een week gaat.");
}
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
</script>
</head>
<body onload="initieer()">
<div>
<div>
<h1 class="center">Hier kan je zien hoeveel de reservatie je zou kosten</h1>
</div>
<div id="reservatie">
<div>
<label class="links">Basishuurprijs incluis 2 personen(volw) :</label>
<div class="rechts">
<input type="radio" id="IDbasisprijsweekend" name="basisprijs" />Per weekend
<input type="radio" id="IDbasisprijsweek" name="basisprijs" />Per Week (7)
<span id="IDprijsbasis"></span>
</div>
</div>
<div id="extravolwprijs">
<label class="links">Aantal extra volwassenen :</label>
<div class="rechts">
<select id="IDaantalvolw">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<span id="IDprijsvolw"></span>
</div>
</div>
<div>
<label class="links">Aantal kinderen onder de 12 jaar : </label>
<div class="rechts">
<select size="1" id="IDaantalkind">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span id="IDprijskind"></span>
</div>
</div>
<input type="button" id="IDbereken" value="Bereken prijs" class="center" onclick="afdrukken()"/>
<div id="totprijs"><b><u>Totale prijs: </u></b><span id="IDprijs"></span></div>
</div>
<div id="fotokosten"><img src="image/kosten.png" /></div>
</div>
</body>
</html>