0

Look at my code...

<html>
<head>
<script>
    
var div1 = "";
var div2 = "";
var div3 = "";
var div4 = "";
var div5 = "";
var div6 = "";
var div7 = "";
var div8 = "";
var div9 = "";

function NewDiv(type) {

if(div1 == "")
{
div1 = "<div id='1' class='1'>"+type+"</div>";
}
else if(div2 == "")
{
div2 = "<div id='2' class='2'>"+type+"</div>";
}
else if(div3 == "")
{
div3 = "<div id='3' class='3'>"+type+"</div>";
}
else if(div4 == "")
{
div4 = "<div id='4' class='4'>"+type+"</div>";
}
else if(div5 == "")
{
div5 = "<div id='5' class='5'>"+type+"</div>";
}
else if(div6 == "")
{
div6 = "<div id='6' class='6'>"+type+"</div>";
}
else if(div7 == "")
{
div7 = "<div id='7' class='7'>"+type+"</div>";
}
else if(div8 == "")
{
div8 = "<div id='8' class='8'>"+type+"</div>";
}
else if(div9 == "")
{
div9 = "<div id='9' class='9'>"+type+"</div>";
}
}
</script>
<style>



</style>
</head>
</html>    
<script>
function Refresh()
{
document.write(div1+div2+div3+div4+div5+div6+div7+div8+div9);
}
</script>
<html>
<body>
<form>
<select name="type" id="type">
<option value="header">Header</option>
<option value="navigation">Navigation</option>
<option value="content"> Body / Content / Sidebar / Footer</option>
</select>
<input type="button" value="Add Element" onClick="NewDiv(getElementById('type').value);Refresh();">

</body>
</html>

See with this simple script every works as I planned until the Refresh() function. The document.write works, but the html no longer shows up and the page continues to run without stopping?

2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by hielo
0

You can only use document.write() WHILE the page is loading. If you use it AFTER the page has loaded, it will "erase" EVERYTHING that was already there and then write whatever new content you specify in the argument that you pass to document.write() . What you need is to NOT use the Refresh() at all. You need to designate an element with an ID to insert the new content into ("target element"). Then within NewDiv() use getElementById() to update that target element.

<html>
<head>
<script>
    
var div1 = "";
var div2 = "";
var div3 = "";
var div4 = "";
var div5 = "";
var div6 = "";
var div7 = "";
var div8 = "";
var div9 = "";

function NewDiv(type, target) 
{

  if(div1 == "")
  {
    div1 = "<div id='1' class='1'>"+type+"</div>";
  }
  else if(div2 == "")
  {
    div2 = "<div id='2' class='2'>"+type+"</div>";
  }
  else if(div3 == "")
  {
    div3 = "<div id='3' class='3'>"+type+"</div>";
  }
  else if(div4 == "")
  {
    div4 = "<div id='4' class='4'>"+type+"</div>";
  }
  else if(div5 == "")
  {
    div5 = "<div id='5' class='5'>"+type+"</div>";
  }
  else if(div6 == "")
  {
    div6 = "<div id='6' class='6'>"+type+"</div>";
  }
  else if(div7 == "")
  {
    div7 = "<div id='7' class='7'>"+type+"</div>";
  }
  else if(div8 == "")
  {
    div8 = "<div id='8' class='8'>"+type+"</div>";
  }
  else if(div9 == "")
  {
    div9 = "<div id='9' class='9'>"+type+"</div>";
  }
  target=document.getElementById(target);
  if(target)
    target.innerHTML=div1+div2+div3+div4+div5+div6+div7+div8+div9;
  else
    alert("Unable to locate element with id=" + target);
}
</script>
<style></style>
</head>
<body>
<form>
<select name="type" id="type">
<option value="header">Header</option>
<option value="navigation">Navigation</option>
<option value="content"> Body / Content / Sidebar / Footer</option>
</select>
<input type="button" value="Add Element" onClick="NewDiv(document.getElementById('type').value,'dynamicData');">
<div id="dynamicData"></div>
</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.