Javascript doesn't change document?
Posted
by egbokul
on Stack Overflow
See other posts from Stack Overflow
or by egbokul
Published on 2010-05-20T09:05:54Z
Indexed on
2010/05/20
9:10 UTC
Read the original article
Hit count: 161
Filed under:
JavaScript
|html
Take a look at this example code, which doesn't work:
<?xml version='1.0' encoding='UTF-8' ?>
<!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">
<head>
<script type="text/javascript">
<!--
function moveMe() {
document.getElementById('moveme').top = 200;
document.getElementById('moveme').style.backgroundcolor = 'green';
document.getElementById('writeme').innerHtml = 'abc';
alert('called!');
}
// -->
</script>
<style type="text/css">
.moveable {
position: absolute;
top: 30px;
left: 200px;
width: 100px;
height: 100px;
background-color: yellow;
}
#writeme {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div id="moveme" class="moveable" onClick="moveMe()">
<p id="writeme">Hello!</p>
</div>
</body>
</html>
When I click on the text the alert is displayed, but nothing is changed in the document. The paragraph text is not overwritten, the div is not moved... tested it in FF and IE, also checked the DOM via Firebug: strange thing is that the new values are written to the nodes, but they are displayed in bold, and the old values are still there. WTF?
I guess I'm missing something fundamental here.
© Stack Overflow or respective owner
