0

似乎无法弄清楚为什么这不起作用。我在 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>
4

3 回答 3

2

一种方法，我已经远离了内联 JavaScript，以便 a: 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 小提琴演示。

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

参考：

于 2012-04-24T16:03:50.887 回答
0 
<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:;” 而不是“#”，以防止页面滚动到顶部

于 2012-04-24T15:40:04.553 回答
-1 
<a onclick="javascript:test**();**" href="#">Test Test Test</a>

希望有帮助，马丁

于 2012-04-24T15:39:14.930 回答