javascript - 如何在 document.write 中调用 onclick 函数？-6ren

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

转载作者：行者123 更新时间：2023-12-02 19:35:14

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

最佳答案

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

关于javascript - 如何在 document.write 中调用 onclick 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10989767/

全站热门文章

首页

博学

6Ren·AI

商城

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