Question

我的Javascript文件中有以下代码行，当用户点击链接测试时，我想调用函数hide，但它不会在页面上显示为链接。做什么

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

编辑0

基于这些建议，我使用document.write的唯一原因是因为我试图在另一个页面上显示HTML，即收购页面。希望有一个更好的方法来做到这一点。目的是在用户点击“test”之前显示前面的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.");
 }
}

Answer 1

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

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

Answer 2

@PeanutsMonkey，

继续上述评论。出于某种原因，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.");
 }
}

Answer 3

您可以创建一个空元素（比如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 个答案: