0

ユーザーがリンク テストをクリックしたときに関数を呼び出したい Javascript ファイルに次のコード行がありますがhide、ページにリンクとして表示されません。どうする

document.write('<a href="#" onclick="hide();>test</a>"');

編集 0

提案に基づいて、私が document.write を使用している唯一の理由は、別のページ、つまり引き継ぎページに HTML を表示しようとしているからです。これを行うためのより良い方法をいただければ幸いです。意図は、ユーザーが「テスト」をクリックするまで、前の HTML が表示されることです。テストをクリックすると、前の HTML が非表示になり、通常表示されるページ コンテンツが表示されます。

function show() {
    obj1 = document.getElementById("container");
    obj1.style.position = "absolute";
    obj1.style.top = "0px";
    obj1.style.left = "0px";
    obj1.style.width = "100%";          
    obj1.style.textAlign = "center";
    obj1.style.zIndex = "9999";
    obj1.style.visibility = "visible";
    obj1.style.display = "inline";
    obj1.style.backgroundColor = "#FFF";
    document.write('<h1>Hello World!</h1><p>Have a nice day!</p>');
    document.write('<a href="#" onclick="hide();">test</a>');

}

function hide() {   
    obj1 = document.getElementById("container");
    obj1.style.display = "none";
    obj1.style.visibility = "hidden";
}

完全なコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset="UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />

    <title>takeover</title>

    <base href="" />
    <link rel="stylesheet" href="" />

    <style type="text/css" media="all" />

    #container {
         position:absolute;
         text-align:center;
         background-color:#fff;

         z-index:10;
    }

    </style>

    <script type="text/javascript" src="takeover.js"></script>
</head>
<body>
    <div>
        <div id="container">abc</div>
        <p><a href="#">test</a></p>
    </div>

<script type="text/javascript">
     window.onload = show;
</script>
</body>
</html>

編集1

さて、多数のフォーラムを精査した結果、document.write が画面全体を置き換え、適切な div 要素を呼び出すことができないようです。代わりに、上記の javascript を以下に置き換えましたが、それが適切な方法である場所がわかりません。

function show() {
    obj1 = document.getElementById("container").innerHTML ='<p>Hello World.<br>Here I am.</p>';
    obj1 = document.getElementById("container").innerHTML +='<a href="#" onclick="hide();">test</a>';

}

function hide() {   
    obj1 = document.getElementById("container");
     if(obj1)
 {
   alert("Going to hide the element");
   obj1.style.display = "none";
   obj1.style.visibility = "hidden";
 }
 else
 {
   alert("Cannot find the element with id container.");
 }
}
4

3 に答える 3

1

私はあなたが閉じられていない引用を持っていると思います...これを試してください：

document.write('<a href="#" onclick="hide();">test</a>');
于 2012-06-12T02:14:00.480 に答える
1

@ピーナッツモンキー、

上記コメントの続きです。何らかの理由で、SO が私のコメントを食べています。

これらを試してください

function show() {
    obj1 = document.getElementById("container");
    obj1.style.position = "absolute";
    obj1.style.top = "0px";
    obj1.style.left = "0px";
    obj1.style.width = "100%";          
    obj1.style.textAlign = "center";
    obj1.style.zIndex = "9999";
    obj1.style.visibility = "visible";
    obj1.style.display = "inline";
    obj1.style.backgroundColor = "#FFF";
    document.write('<h1>Hello World!</h1><p>Have a nice day!</p>');
    document.write('<a href="#" onclick="hide();">test</a>');

}

function hide() {   
    obj1 = document.getElementById("container");
 if( obj1)
 {
    alert("Going to hide the element");
   obj1.style.display = "none";
    //obj1.style.visibility = "hidden"; // not required
 }
 else
 {
   alert("Cannot find the element with id container.");
 }
}
于 2012-06-12T03:02:31.423 に答える
0

を使用する代わりにdocument.write()、空の要素、たとえばdivを作成し、そのinnerHTMLをリンクに設定できます。

<div id="wrap"></div>
<script language="Javascript">
var wrap = document.getElementById("wrap");
wrap.innerHTML = '<a href="#" onclick="hide();">test</a>';
</script>
于 2012-06-12T02:15:15.103 に答える