We have to make a little webshop in HTML, Css and javascript. Everything but the div's are to be made in JS, also the table's we can't make them in HTML. In the left (Links div) we make a couple of links, in the middle div (dynamicLeft) we have to create on orderfile for our product and in te right div (dynamicRight) we have to make a a shopping cart selection with calculation of the prices.
This is my code, I made the divs, made sure u got the left div in the beginning, the middle if u click on a link and the right if you click the button to show the shoppingcart. the problem is that i don't know how to create a table (dynamicRight) that will adjust everytime I click/buy something in the dynamicLeft.
this is my result so far:
[IMG]http://i42.tinypic.com/6s45na.png[/IMG]
this is what it should be like when it is ready:
[IMG]http://i41.tinypic.com/2pq9pnd.png[/IMG]
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<img id="logo" src="_files/_img/hoofding.gif" />
</div>
<div id="hoofding">
</div>
</div>
<hr />
<div id="main">
<div id="links">
</div>
<div id="content">
</div>
</div>
<div id="footer">
<hr />
<p>!Uw browser ondersteund geen JavaScript!</p>
<hr />
</div>
</div>
<script type="text/javascript">
var linkGeklikt=0;
var totaal=0;
function initialize(){
writeTitel();
writeLinks();
writeFooter();
}
function writeTitel(){
var write = document.getElementById("hoofding");
write.innerHTML = "<h1>Schoolboeken Store</h1><p>1ste Bachelor Electronica-ICT</p>";
}
function writeLinks(){
var write = document.getElementById("links");
write.innerHTML =
"<p><a href='#' onclick='showItems(1)'>Webmedia</a></p><p><a href='#' onclick='showItems(2)'>Elektronica</a></p><p><a href='#' onclick='showItems(3)'>ICT</a></p>";
}
function writeFooter(){
var write = document.getElementById("footer");
write.innerHTML = "<hr /><p>footer</p><hr />";
}
function createLeftDiv() {
var divElement = document.createElement("div");
divElement.id = "dynamicLeft";
divElement.className = "dynamicLeftDiv";
document.getElementById('content').appendChild(divElement);
var write = document.getElementById("dynamicLeft");
}
function createRightDiv() {
var divElement = document.createElement("div");
divElement.id = "dynamicRight";
divElement.className = "dynamicRightDiv";
document.getElementById('content').appendChild(divElement);
var write = document.getElementById("dynamicRight");
linkGeklikt ++;
}
function showItems(link){
if (linkGeklikt == 0){
createLeftDiv();
createRightDiv();
}
if (link == 1){
showItem1();
} else if (link == 2){
showItem2();
} else {
showItem3();
}
}
function showItem1(){
var write = document.getElementById("dynamicLeft");
var tableWebmedia = '\
<form name ="webmediaForm">\
<table width="240" border="0">\
<tr>\
<td width="39"><img src="_files/_img/dw.png" width="40" height="40" alt="Dreamweaver"/></td>\
<td width="94"><p>Software bij Labo webtechnologie</p></td>\
<td width="25">\
<select name="lijstAantal" id="lijstAantal">\
<option value="1">1</option>\
<option value="2">2</option>\
<option value="3">3</option>\
<option value="4">4</option>\
</select></td>\
<td width="54"><input type="submit" name="bestel1" id="bestelknop" value="Bestel" /></td>\
</tr>\
<tr>\
<td> </td>\
</tr>\
<tr>\
<td><img src="_files/_img/art.png" width="40" height="40" alt="syllabus"/></td>\
<td><p>Cursus van de leerkracht, webtechnolgie</p></td>\
<td><select name="lijstAantal" id="lijstAantal">\
<option value="1">1</option>\
<option value="2">2</option>\
<option value="3">3</option>\
<option value="4">4</option>\
</select></td>\
<td><input type="submit" name="bestel2" id="bestelknop" value="Bestel"/></td>\
</tr>\
<tr>\
<td> </td>\
</tr>\
<tr>\
<td><img src="_files/_img/fom.png" width="40" height="53" alt="Fundamentals"/></td>\
<td><p>Fundamentals of Multimedia</p></td>\
<td><select name="lijstAantal" id="lijstAantal">\
<option value="1">1</option>\
<option value="2">2</option>\
<option value="3">3</option>\
<option value="4">4</option>\
</select></td>\
<td><input type="submit" name="bestel3" id="bestelknop" value="Bestel" /></td>\
</tr>\
</table>\
</form>\
<br /><br /><br />\
<input id="showWinkelmandKnop" name="showWinkelmand" type="button" value="show winkelmandje" onClick="showWinkelmand()"/>\
'
write.innerHTML = tableWebmedia;
}
function showItem2(){
var write = document.getElementById("dynamicLeft");
write.innerHTML = "Elektronica boeken tabel";
}
function showItem3(){
var write = document.getElementById("dynamicLeft");
write.innerHTML = "ICT boeken tabel";
}
function showWinkelmand(){
var write = document.getElementById("dynamicRight");
var tableSamenvatting = '\
<p class="vetOnderlijnd">Uw selectie:</p>\
<p>De totaalprijs is: </p>\
<p>This is gonna be tha shit!</p>\
<br />\
<input id="hideknop" name="showSelectie" type="button" value="hide Winkelmandje" onClick="hideWinkelmand()"/>\
'
write.innerHTML = tableSamenvatting;
}
function hideWinkelmand(){
var write = document.getElementById("dynamicRight");
write.innerHTML = ' ';
hide(showWinkelmandKnop);
}
initialize();
</script>
</body>
</html>