?
Solved

javascipt function document.getElementById() gives error.

Posted on 2004-08-11
19
Medium Priority
?
1,830 Views
Last Modified: 2012-06-27
Hi,

here is a fucntion which I've written in javascript

function handlePrint()
{
document.write('<html><body>');
document.write('<table>');
var tableTemp=document.getElementById("table1");
alert(tableTemp.innerText);
//your selected table should have a id or name
document.write(tableTemp.innerHTML);
document.write('</table>');
document.write('</body></html>')
window.print();
}

in the above function, the line "var tableTemp=document.getElementById("table1"); " gives an error saying object required.

The table object with an id "table1" already exists.

Please help me out, Thanks in advance.

Vishrut
0
Comment
Question by:vishrutsumit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
  • 5
19 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 1400 total points
ID: 11776299
Hi

Most likely it's because the two previous document.write() statements erased your whole page if it's in the <head> section. Before you do document.write(), you should save var tableTemp. Try this:

var tableTemp=document.getElementById("table1");
document.write('<html><body>');
document.write('<table>');
alert(tableTemp.innerText);
//your selected table should have a id or name
document.write(tableTemp.innerHTML);
document.write('</table>');
document.write('</body></html>')
window.print();


Regards,
Zyloch
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11776355
you may need to go one step further Zylock

var tableTempText=document.getElementById("table1").innerText;
document.write('<html><body>');
document.write('<table>');
alert(tableTempText);
//your selected table should have a id or name
document.write(tableTempText);
document.write('</table>');
document.write('</body></html>')
window.print();
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11776384
Ah, that's my bad, sorry *looks sheepish*
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:vishrutsumit
ID: 11776514
Hi Zyloch/Bustarooms,

Great !!This works,Thanks a lot.only thing remained is that now I want to print the newly displayed page, and its not working,can any of you please suggest something.

Thanks in advance
Vishrut
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11776627
How come it's not working? Make sure your handlePrint function is in the <head> section.
0
 

Author Comment

by:vishrutsumit
ID: 11776732
Actually the handlePrint method is getting called,but it doesnot print..I doono why
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11776777
Well, you never know until you try ;) Try this:

document.write('<html><body onload="self.print();">');
0
 

Author Comment

by:vishrutsumit
ID: 11776916
No It doesn't, this is my  code :

function handlePrint()
{
alert("Print Called");
var tableTemp=document.getElementById("table1").innerHTML;
document.write('<html><body onload="self.print();">');
document.write('<table>');
alert(tableTemp);
//your selected table should have a id or name
document.write(tableTemp);
document.write('</table>');
document.write('</body></html>');
window.print();
}

after my new window is displayed,and I go back by right clicking,then the print window appears,and it displays the old window.I want to display the new window which I just created.

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11776947
How odd. This was my test:

<html>
<head>
<script>
function oh() {
document.write('hi');
}
</script>
</head>
<body>
<p onclick="oh();">fjdsoifdsh</p>
</body>
</html>

Look at Print Preview after you click the fjdsoifdsh.
0
 

Author Comment

by:vishrutsumit
ID: 11777173
I did that.
Acually in my case it worked,but only after I refrseh the window.Because when I refresh the onLoad even will be called,and the print is fired automatically.
I want that without refresh it should work.

Vishrut
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11777210
i guess your trying to make a printer friendly type of thing

if so there's a cleaner and nicer way using css and media types
0
 

Author Comment

by:vishrutsumit
ID: 11777275
yes I'm trying to do the same.Please suggest a solution if you have so.
in my printer friendly page, I want to remove some of the headings and just want to show tabular data.

Please suggest.I'm also increasing the point value now.
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11777378
ok well this is ridiculously simplified, but it should give you the idea.



<html>
<head>
<style>
@media print {
    .banners, .footer{display:none;}
}
</style>
</head>
<body>
<div class="banners">THIS IS A BANNER.  WE DON'T WANT TO PRINT THIS</div>
<table id="table1">
 <tr><td>Here's what I do want to print</td></tr>
</table>
<div class="footer">THIS IS SOME FOOTER INFORMATION.  WE DON'T WANT TO PRINT THAT

EITHER.<BR/>
<a href="#" onclick="window.print();return false;">Print</a>
</div>
</body>
</html>




basically you can setup your page to hide things that you don't want printed (images, banners, navigation, etc) by using display:none;  you can also do all kinds of fancy css stuff like adjust the text size of the stuff you do want printed. read up on it at http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11777397
oh and this isnt limited to a javascript print call....it would print up like this if you go to File Print
0
 

Author Comment

by:vishrutsumit
ID: 11777597
sorry guys..It is my first experience with this site,I couldn't divide the points correctly.
I regret for that.
anyway..will take care for future questions.
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11777642
just curious if the css suggestion and link helped you figure it out
0
 

Author Comment

by:vishrutsumit
ID: 11777888
Just looking at it,will appreciate if you please provide more help if you can.

thanks
vishrut
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11778160
To add on to what Bustarooms was saying, if you want something else to be invisible during viewing but visible during print, you'd just have this:

<style>
.visiblePrintOnly {display:none;}
@media print {
    .banners, .footer{display:none;}
   .visiblePrintOnly {display:block;}
}
</style>
0
 

Author Comment

by:vishrutsumit
ID: 11778249
ok,thanks a bunch.Let me work on this.

vishrut
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question