Internet Explorer och W3C DOM

higaMedlem sedan aug. 2000359 inlägg

2 okt. 2002 08:44#1

Jag håller på och lär mig W3C DOM nu och testade att skriva ett litet program som genererar ett användardefinierat antal punkter på en cirkel med likformigt avstånd. Detta funkar hur bra som helst i Mozilla 1.2a, men i MSIE 6.0 funkar det inte alls :(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Polygon template creator</title>
<script language="JavaScript" type="text/javascript">
<!--
dots = 7
radius = 400
function rock()
{
	dots = document.forms[0].tjo.value
	while(document.getElementsByTagName("div").length)
	{
		foo = document.getElementsByTagName("div")[0]
		document.body.removeChild(foo)
	}
	for(i=0;i<dots;i++)
	{
		dot = document.createElement("div")
		document.body.appendChild(dot)
		foo = document.getElementsByTagName("div")[i]
		foo.setAttribute("style", "position:absolute; left: 0px; top: 0px; background: blue; width: 4px; height: 4px")
		foo.style.left = Math.floor(20+radius + Math.sin(Math.PI*2*i/dots)*radius) + "px"
		foo.style.top = Math.floor(20+radius + Math.cos(Math.PI*2*i/dots)*radius) + "px"
	}
}
//-->
</script>

</head>
<body>
<form>
<input type="text" value="7" name="tjo">
<input type="button" value="Place dots" onclick="rock()">
</form>
</body>
</html>

Nån som vet hur man får sånt här att funka i MSIE, utan att behöva skapa en container div och plotta ut punkterna mha innerHTML?
Mvh Lukas

JojoxxMedlem sedan juni 20004 308 inlägg

2 okt. 2002 18:43#2

utan att behöva skapa en container div...

Det är precis det du gör även med dot = document.createElement("div"); document.body.appendChild(dot) IE-DOM är lite enklare (simplare) och Netscape har ju faktiskt tagit efter innerHTML. Med lite tur kanske det även kommer med i W3C DOM. En omskrivning för IE-DOM (som även fungerar i Mozilla blir);

<script language="JavaScript" type="text/javascript">
<!--
dots = 7
radius = 400
function rock() {
	dots = document.forms[0].tjo.value
	document.getElementById("polygon").innerHTML="";
	for(i=0;i<dots;i++) {
		document.getElementById("polygon").innerHTML+='<div style="position:absolute; left: '+Math.floor(20+radius + Math.sin(Math.PI*2*i/dots)*radius)+'px; top: '+Math.floor(20+radius + Math.cos(Math.PI*2*i/dots)*radius)+'px; background: blue; width: 4px; height: 4px"></div>';
	}
}
//-->
</script>