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

How do I call an onclick function within document.write?

本文关键字：调用 onclick 函数 write document      更新时间：2023-09-26

我的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替换了上面的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.");
 }
}

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

我想你有一个未关闭的报价......试试这个：

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

而不是使用 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>
相关文章：