Member Avatar for Joe34

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
  • 157 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by hielo
Member Avatar for hielo

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.