Reputation: 79
Can't seem to figure out why this isn't working. I have an onclick event on a href that should fire a javascript function that writes a new div. Any help would be appreciated.
I'm pretty sure my problem is with the link, not the function.
<html>
<head>
<title>Blah</title>
<style type="text/css">
.box {
position: fixed;
z-index: 5;
width:100%;
height:100%;
background-color: rgba(0,0,0,.8);
padding:25px 10px 25px 10px;
}
.content {
z-index: 1;
padding: 25px 15px 10px 15px;
}
</style>
</head>
<body>
<script type="text/javascript">
function test() {
document.write("<div class='box'>Box Test</div>");
}
</script>
<h1>Test Page</h1>
<div class="content">
<a onclick="javascript:test" href="#">Test Test Test</a>
</div>
</body>
</html>
Upvotes: 0
Views: 5933
Reputation: 253318
One approach, and I've moved away from the in-line JavaScript, in order that a: the JavaScript/behaviour's less intrusive, and b: so there's less need to look through every element in order to affect/change what happens:
var d = document,
as = d.getElementsByTagName('a');
function test(elem,evt){
evt.preventDefault();
var div = d.createElement('div'),
tN = d.createTextNode(elem.firstChild.nodeValue),
b = d.getElementsByTagName('body')[0];
div.appendChild(tN);
b.insertBefore(div,elem.parentNode);
}
for (var i=0,len=as.length;i<len;i++){
as[i].onclick = function(e){
test(this,e);
};
}
With the following HTML:
<h1>Test Page</h1>
<div class="content">
<a href="#">Test Test Test</a>
</div>
To try and explain Mathletics' comment, the problem is that you're using document.write()
, this certainly writes to the document. Unfortunately it over-writes the document itself; so the page contents are replaced entirely.
References:
document.createElement()
.document.createTextNode()
.document.write()
.element.appendChild()
.element.getElementsByTagName()
.element.firstChild
.event.preventDefault()
.node.insertBefore()
node.nextSibling
.node.nodeValue
.Upvotes: 2
Reputation: 15550
<html>
<head>
<title>Blah</title>
<style type="text/css">
.box {
position: fixed;
z-index: 5;
width:100%;
height:100%;
background-color: rgba(0,0,0,.8);
padding:25px 10px 25px 10px;
}
.content {
z-index: 1;
padding: 25px 15px 10px 15px;
}
</style>
</head>
<body>
<script type="text/javascript">
function test() {
document.write("<div class='box'>Box Test</div>");
}
</script>
<h1>Test Page</h1>
<div class="content">
<a onclick="test()" href="javascript:;">Test Test Test</a>
</div>
</body>
</html>
see
<a onclick="javascript:test" href="#">Test Test Test</a>
updated to
<a onclick="test()" href="javascript:;">Test Test Test</a>
missing paranthesis
Note: I prefer to use "javascript:;" instead of "#" inorder to prevent page scrolling top
Upvotes: 0
Reputation: 336
<a onclick="javascript:test**();**" href="#">Test Test Test</a>
hope that helps, martin
Upvotes: -1