如何在document.write中调用onclick函数？

Question

I have the following line of code in my Javascript file which I would like to call the function hide when the user clicks on the link test however it does not appear as a link on the page. 我的代码在我的JavaScript文件中的以下行，我想调用的函数hide当链路测试用户点击但是它不会出现在页面上的链接。 What do 做什么

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

EDIT 0 编辑0

Based on the suggestions, the only reason I am using document.write is because I am attempting to display HTML over another page ie a takeover page. 基于这些建议，我使用document.write的唯一原因是因为我试图在另一个页面上显示HTML，即一个接管页面。 Would appreciate a better way of doing this. 希望有一个更好的方法来做到这一点。 The intention is until the user clicks on "test" the preceding HTML would be displayed. 目的是在用户点击“test”之前显示前面的HTML。 When they click on test, the preceding HTML is hidden and the page content as it would normally display is shown. 当他们点击测试时，前面的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";
}

Full Code 完整代码

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

EDIT 1 编辑1

Okay, having scoured a multitude of forums it appears that document.write replaces the entire screen and hence the inability to call the appropriate div element. 好吧，在浏览过多个论坛之后，看起来document.write会替换整个屏幕，因此无法调用相应的div元素。 I have instead replaced the javascript above with the below however am unsure where it is the proper way of doing it. 我已经用下面的内容替换了上面的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.");
 }
}

Answer 1

我认为你有一个未公开的引用...试试这个：

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

Answer 2

@PeanutsMonkey, @PeanutsMonkey，

Continuation of the above comments. 继续上述评论。 For some reason SO is eating my comments. 出于某种原因，SO正在吃我的评论。

Try these 试试这些

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

Answer 3

Instead of using document.write() , you can make an empty element, say a div, then set its innerHTML to your link: 您可以创建一个空元素（例如div），然后将其innerHTML设置为您的链接，而不是使用document.write() 。

<div id="wrap"></div>
<script language="Javascript">
var wrap = document.getElementById("wrap");
wrap.innerHTML = '<a href="#" onclick="hide();">test</a>';
</script>

如何在document.write中调用onclick函数？

问题描述

3 个解决方案

解决方案1
1 2012-06-12 02:14:00

解决方案2
1 已采纳 2012-06-12 03:02:31

解决方案3
0 2012-06-12 02:15:15

如何在document.write中调用onclick函数？

问题描述

3 个解决方案

解决方案1 1 2012-06-12 02:14:00

解决方案2 1 已采纳 2012-06-12 03:02:31

解决方案3 0 2012-06-12 02:15:15

解决方案1
1 2012-06-12 02:14:00

解决方案2
1 已采纳 2012-06-12 03:02:31

解决方案3
0 2012-06-12 02:15:15