javascript - 新しいdivを書き込むJavascript onclickイベント

Question

なぜこれが機能しないのか理解できないようです。新しいdivを書き込むjavascript関数を起動する必要があるhrefにonclickイベントがあります。どんな助けでも大歓迎です。

私の問題は機能ではなくリンクにあると確信しています。

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

score 2 · Accepted Answer

1 つのアプローチとして、私はインライン 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()これは確かにドキュメントに書き込みます。残念ながら、ドキュメント自体を上書きします。そのため、ページの内容は完全に置き換えられます。

参考文献:

score 0 · Accepted Answer

<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:;」を使用することを好みますページのスクロールを防ぐために「#」の代わりに

score -1 · Accepted Answer

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

お役に立てば幸いです、マーティン

javascript - 新しいdivを書き込むJavascript onclickイベント

3 に答える 3

Related

Reference