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. stackoverflow.com/questions/802854/… — Matthew Schinckel
– Matthew Schinckel, Commented Jun 12, 2012 at 2:13
How about directly putting this code in your HTML page and just hiding it if you need to? — Chetter Hummin
– Chetter Hummin, Commented Jun 12, 2012 at 2:14
@Matthew Schinckel - Have updated my post and the reasons I am using document.write. — PeanutsMonkey
– PeanutsMonkey, Commented Jun 12, 2012 at 2: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
– Matthew Schinckel, Commented Jun 12, 2012 at 2:32

kiranvj · Accepted Answer · 2012-06-12 03:02:31Z

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, 2012 at 3:02

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

PeanutsMonkey Over a year ago

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.

kiranvj Over a year ago

I doubt whether it exist. Post the full code if possible, also check if document.write(..) is replacing the div with id container.

PeanutsMonkey Over a year ago

Have posted the HTML code that includes the div id container.

kiranvj Over a year ago

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 Over a year ago

Your new code looks ok. You can also try something like obj1 = document.getElementById("container"); obj1.innerHTML ='<p>Hello World.<br>Here I am.</p><a href="#" onclick="hide();">test</a>';

|

Shawn · Accepted Answer · 2012-06-12 02:14:00Z

1

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

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

answered Jun 12, 2012 at 2:14

Shawn

7,3636 gold badges37 silver badges47 bronze badges

7 Comments

PeanutsMonkey Over a year ago

I just tried that and although the link appears now, I am unable to get the function call to work.

kiranvj Over a year ago

Try this, do you see the alert? document.write('<a href="#" onclick="alert(\'test\');">test</a>');

PeanutsMonkey Over a year ago

@kiranvj - That worked but the hide function doesn't. Have posted the code in the post.

kiranvj Over a year ago

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

PeanutsMonkey Over a year ago

@kiranvj - Up that works too. When I click on test, I get the message I am inside hide function

|

user377628 · Accepted Answer · 2012-06-12 02:15:15Z

0

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>

answered Jun 12, 2012 at 2:15

user377628

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related