Question

似乎无法弄清楚为什么这不起作用。我在一个href上有一个onclick事件，它应该触发一个写一个新div的javascript函数。任何帮助，将不胜感激。

我很确定我的问题在于链接，而不是功能。

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

Answer 1

一种方法，我已经放弃了内联JavaScript，以便：JavaScript /行为的侵入性较小，而b：所以不需要查看每个元素以影响/改变什么发生的情况：

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);
    };
}

使用以下HTML：

<h1>Test Page</h1>

<div class="content">
    <a href="#">Test Test Test</a>
</div>

JS Fiddle demo

要尝试解释Mathletics' comment，问题在于您正在使用document.write()，这肯定会写入文档。不幸的是，它覆盖文件本身;所以页面内容完全被替换。

参考文献：

Answer 2

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

见

<a onclick="javascript:test" href="#">Test Test Test</a>

更新为

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

缺少括号

注意：我更喜欢使用“javascript：;”而不是“＃”，以防止页面滚动顶部

Answer 3

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

希望有所帮助，马丁

Javascript onclick事件写新div

3 个答案: