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

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. What do

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

EDIT 0

Based on the suggestions, the only reason I am using document.write is because I am attempting to display HTML over another page i.e. a takeover page. Would appreciate a better way of doing this. The intention is until the user clicks on "test" the preceding HTML would be displayed. When they click on test, the preceding HTML is hidden and the page content as it would normally display is shown.

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

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. I have instead replaced the javascript above with the below however am unsure where it is the proper way of doing it.

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

You probably don't want to use `document.write`. There are lots of disadvantages to it, and not many advantages. http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Matthew Schinckel, Jun 12 '12 at 02:13
How about directly putting this code in your HTML page and just hiding it if you need to? — Chetter Hummin, Jun 12 '12 at 02:14
@Matthew Schinckel - Have updated my post and the reasons I am using document.write. — PeanutsMonkey, Jun 12 '12 at 02:20
@PeanutsMonkey I'm still not sure it does what you think it does. It will (under certain circumstances) completely replace the content of the page. And it doesn't give you any advantages over the solution described by Hassan, below. — Matthew Schinckel, Jun 12 '12 at 02:32
@Matthew Schinckel - Maybe I am misunderstanding what you mean by "completely replace the content of the page" — PeanutsMonkey, Jun 12 '12 at 02:51
You could put the relevant HTML tags in your HTML page. Assign the
,
and proper ids and then use jquery.hide and show as needed — Chetter Hummin, Jun 12 '12 at 03:16

score 1 · Answer 1 · answered Jun 12 '12 at 02:14

1

I think you have an unclosed quote...try this:

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

answered Jun 12 '12 at 02:14

Shawn

6,855
6
29
44

I just tried that and although the link appears now, I am unable to get the function call to work. – PeanutsMonkey Jun 12 '12 at 02:16
Try this, do you see the alert? document.write('test'); – kiranvj Jun 12 '12 at 02:27
@kiranvj - That worked but the hide function doesn't. Have posted the code in the post. – PeanutsMonkey Jun 12 '12 at 02:30
try this in your code, do u see the alert? function hide() { alert("I am inside hide function"); obj1 = document.getElementById("container"); obj1.style.display = "none"; obj1.style.visibility = "hidden"; } – kiranvj Jun 12 '12 at 02:31
@kiranvj - Up that works too. When I click on test, I get the message `I am inside hide function` – PeanutsMonkey Jun 12 '12 at 02:45
Which means the function is getting called. What is the value of obj1? Try this console.log(obj1); If its undefined, check whether you have an element with id container. – kiranvj Jun 12 '12 at 02:55
@kiranvj - There is nothing displayed in Google Chrome's console – PeanutsMonkey Jun 12 '12 at 03:45

score 1 · Accepted Answer · answered Jun 12 '12 at 03:02

1

@PeanutsMonkey,

Continuation of the above comments. For some reason SO is eating my comments.

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

answered Jun 12 '12 at 03:02

kiranvj

22,650
5
51
69

Tried the code above and when I click on the link I get the message "Cannot find the element with id container." It does however exist as the previous function returns the link. – PeanutsMonkey Jun 12 '12 at 03:48
I doubt whether it exist. Post the full code if possible, also check if document.write(..) is replacing the div with id container. – kiranvj Jun 12 '12 at 06:37
Have posted the HTML code that includes the div id container. – PeanutsMonkey Jun 12 '12 at 18:38
document.write when called from inside body tag outputs the text where it is called. If document.write is called from a script tag or external file outside body tag it replaces the other contents in the document. – kiranvj Jun 13 '12 at 04:23
Your new code looks ok. You can also try something like obj1 = document.getElementById("container"); obj1.innerHTML ='
Hello World.
Here I am.
test'; – kiranvj Jun 13 '12 at 04:27
Updated my post with my findings. Thanks for your help. – PeanutsMonkey Jun 13 '12 at 22:36

score 0 · Answer 3 · answered Jun 12 '12 at 02:15

Instead of using document.write(), you can make an empty element, say a div, then set its innerHTML to your link:

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

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

,

3 Answers3