I want to create 3 Div tags Dynamically when I press 3 different buttons (Red Green Blue).. When I press Red I want the height of 'red' div to be the size of my screen so that whole page appears to be red and when I press Green I want the height of the 'red' div to bee 50% of my screen and other 50% of the screen should be occupied by other div (which is Green)..
And finally when I press Blue button I want All the divs to appear on screen with equal height...
I'm able to create the divs but I can't delete the previously created div when I press Red button after pressing all three buttons...
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ass 2</title>
<script type="text/javascript">
function fblue() {
// document.bgColor = 'lightblue';
selc=document.getElementById("first");
divBlue=document.getElementById("one");
myPara.removeChild(divBlue);
selc=document.getElementById("first");
divBlue=document.createElement("div");
divBlue.id = "one";
divBlue.style.backgroundColor = "lightblue";
divBlue.style.height = "610px"
divBlue.innerHTML = "dv tag created successfully";
selc.appendChild(divBlue);
}
function fgreen() {
selc=document.getElementById("first");
divBlue=document.getElementById("one");
divBlue.id = "one";
divBlue.style.backgroundColor = "lightblue";
divBlue.style.height = "305px"
divBlue.innerHTML = "dv tag created successfully";
selc.appendChild(divBlue);
divGreen=document.createElement("div");
divGreen.id = "one";
divGreen.style.backgroundColor = "lightgreen";
divGreen.style.height = "305px"
divGreen.innerHTML = "dv tag created successfully";
selc.appendChild(divGreen);
//document.bgColor = '';
}
function fred() {
document.getElementById("one").style.backgroundColor = 'lightblue';
document.getElementById("one").style.width = '1104px';
document.getElementById("one").style.height = '185px';
document.getElementById("two").style.backgroundColor = 'red';
document.getElementById("two").style.width = '1104px';
document.getElementById("two").style.height = '185px';
document.getElementById("three").style.backgroundColor = 'lightgreen';
document.getElementById("three").style.width = '1104px';
document.getElementById("three").style.height = '185px';
document.bgColor = '';
}
</script>
</head>
<body style="margin: 0px;">
<div style="height: 0px;" id="first"></div>
<div id="four" style="margin-left: 415px; margin-top: 500px">
<form>
<input type="button" name="blu" value="Blue" onclick="javascript:fblue();">
<input type="button" name="gre" value="Green/Red" onclick="javascript:fgreen();">
<input type="button" name="re" value="Red/Green/Blue" onclick="javascript:fred();">
</form>
</div>
</body>
</html>
I want to create 3 Div tags Dynamically when I press 3 different buttons (Red Green Blue).. When I press Red I want the height of 'red' div to be the size of my screen so that whole page appears to be red and when I press Green I want the height of the 'red' div to bee 50% of my screen and other 50% of the screen should be occupied by other div (which is Green)..
And finally when I press Blue button I want All the divs to appear on screen with equal height...
I'm able to create the divs but I can't delete the previously created div when I press Red button after pressing all three buttons...
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ass 2</title>
<script type="text/javascript">
function fblue() {
// document.bgColor = 'lightblue';
selc=document.getElementById("first");
divBlue=document.getElementById("one");
myPara.removeChild(divBlue);
selc=document.getElementById("first");
divBlue=document.createElement("div");
divBlue.id = "one";
divBlue.style.backgroundColor = "lightblue";
divBlue.style.height = "610px"
divBlue.innerHTML = "dv tag created successfully";
selc.appendChild(divBlue);
}
function fgreen() {
selc=document.getElementById("first");
divBlue=document.getElementById("one");
divBlue.id = "one";
divBlue.style.backgroundColor = "lightblue";
divBlue.style.height = "305px"
divBlue.innerHTML = "dv tag created successfully";
selc.appendChild(divBlue);
divGreen=document.createElement("div");
divGreen.id = "one";
divGreen.style.backgroundColor = "lightgreen";
divGreen.style.height = "305px"
divGreen.innerHTML = "dv tag created successfully";
selc.appendChild(divGreen);
//document.bgColor = '';
}
function fred() {
document.getElementById("one").style.backgroundColor = 'lightblue';
document.getElementById("one").style.width = '1104px';
document.getElementById("one").style.height = '185px';
document.getElementById("two").style.backgroundColor = 'red';
document.getElementById("two").style.width = '1104px';
document.getElementById("two").style.height = '185px';
document.getElementById("three").style.backgroundColor = 'lightgreen';
document.getElementById("three").style.width = '1104px';
document.getElementById("three").style.height = '185px';
document.bgColor = '';
}
</script>
</head>
<body style="margin: 0px;">
<div style="height: 0px;" id="first"></div>
<div id="four" style="margin-left: 415px; margin-top: 500px">
<form>
<input type="button" name="blu" value="Blue" onclick="javascript:fblue();">
<input type="button" name="gre" value="Green/Red" onclick="javascript:fgreen();">
<input type="button" name="re" value="Red/Green/Blue" onclick="javascript:fred();">
</form>
</div>
</body>
</html>
- how are you calculating heights for your three divs – defau1t Commented Nov 10, 2012 at 10:27
- if I were you i'd read answers.oreilly./topic/… before worrying about divs and sizes – lostsource Commented Nov 10, 2012 at 10:29
- WOW!! People are already rating my question -4 ! What's my fault?? The only problem I'm facing right now is even after using "element.removeChild(child); it is not being deleted....... This made me ask a question here... My mistake.. – Nayeem Junaid Commented Nov 10, 2012 at 10:45
- @NayeemJunaid: because the way you have pasted your code was in really bad shape. – defau1t Commented Nov 10, 2012 at 10:55
- @defau1t I always face problem pasting the code over here.. Why can't it be simple like other sites to paste some code in quotess?? – Nayeem Junaid Commented Nov 12, 2012 at 8:50
1 Answer
Reset to default 4 document.createElement("div");
will create a div dynamiclly
var oldChild = element.removeChild(child);
element.removeChild(child);
Removes a child node from the DOM. Returns removed node.