Thema: getElementByID-Frage
Hallo,
da ich nicht weiss, wo ich es sonst plazieren soll, einfach erst einmal hier.... 
<?php
/*
* Created on 12.05.2006,17:11:22 by Lockhead
* Filename: index.php
*
* TODO
*/
session_start();
if (isset($_GET['css'])) {
$_SESSION['css'] = $_GET['css'];
header("Location: ".$_SERVER['HTTP_REFERER']);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>JavaScript-CSS</title>
<link href="style1.css" rel="stylesheet" type="text/css" id="stylesheet">
<script type="text/javascript">
//<![CDATA[
function setCss(name)
{
document.location.href = document.location.pathname+"?css="+name;
}
window.onload = function()
{
name = <?= (isset($_SESSION['css'])) ? "'".$_SESSION['css']."'" : "false"; ?>;
if (name)
{
document.getElementById("stylesheet").removeAttribute("href");
document.getElementById("stylesheet").setAttribute("href",name+".css");
}
}
//]]>
</script>
</head>
<body>
<div id="rahmen">
<h1>CSS Session Test</h1>
<p id="lore">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Phasellus tempor facilisis magna. Vestibulum
sapien. <span id="innen">Aliquam consequat</span> libero
vitae sem. <a href="#">Nulla</a> facilisi.
</p>
<p id="button">
<span onclick="setCss('style1');">Style 1</span><br />
<span onclick="setCss('style2');">Style 2</span><br />
<span onclick="setCss('style3');">Style 3</span><br />
<span onclick="showDOM();">Show DOM-Tree</span><br />
</p>
</div>
<script type="text/javascript">
//<![CDATA[
var i = 0;
function insertP()
{
var node2 = document.getElementById("lore");
var node = document.getElementById("rahmen");
var p2 = node2.cloneNode(true);
//document.body.innerHTML = document.body.innerHTML.replace(/[\r\n|\s]/g,'');
document.body.insertBefore(p2,node);
i++;
p2.setAttribute("id","testp"+i);
}
function removeP()
{
var node = document.getElementById("testp"+i);
if (node)
{
var temp = document.body.removeChild(node);
i--;
}
}
var j = 0;
function appendDIV()
{
var node2 = document.getElementById("rahmen");
var node = document.getElementById("rahmen");
var p2 = node2.cloneNode(true);
//document.body.innerHTML = document.body.innerHTML.replace(/[\r\n|\s]/g,'');
//document.body.insertBefore(p2,node);
document.body.appendChild(p2);
j++;
p2.setAttribute("id","testdiv"+j);
}
function removeDIV()
{
var node = document.getElementById("testdiv"+j);
if (node)
{
var temp = document.body.removeChild(node);
j--;
}
}
//]]>
</script>
<span onclick="insertP();">Insert P</span><br />
<span onclick="removeP();">Remove P</span><br />
<span onclick="appendDIV();">Insert DIV</span><br />
<span onclick="removeDIV();">Remove DIV</span><br />
</body>
</html>Angedacht war eigentlich folgendes:
Die Funktion insertP() sollte den Absatz mit der ID "lore" kopieren und direkt obendrueber noch einmal einfuegen. (bzw evtl auch den Text veraendern, etc...).
Wenn ich nun ueber getElementById("lore") den Absatz anspreche, dann erhalte ich immer die Meldung "ungueltige Methode....".
Auch habe ich versucht, den Absatz "button" ueber getElementByID zu "erreichen" und hatte aehnliche Probleme.
Ermoeglicht uns getElementByID nur den Zugriff auf nodes, die direkt unter dem body sitzen oder was ist das Problem?
Vielen Dank,
Liebe Gruesse, Johannes
P.S.: Wo sollen evtl Fehler/Tippfehler hin?
Zuletzt bearbeitet von Lockhead (15-05-2006 14:00:28)
lockhead.net
Ansonsten müssen wir uns nochmal heran tasten ...