ENev
ENev

Reputation: 79

Javascript onclick event to write new div

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

Answers (3)

David Thomas
David Thomas

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>​

JS Fiddle demo.

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:

Upvotes: 2

H&#252;seyin BABAL
H&#252;seyin BABAL

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

witti
witti

Reputation: 336

<a onclick="javascript:test**();**" href="#">Test Test Test</a>

hope that helps, martin

Upvotes: -1

Related Questions