• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1844
  • Last Modified:

javascipt function document.getElementById() gives error.

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
vishrutsumit
Asked:
vishrutsumit
  • 8
  • 6
  • 5
1 Solution
 
ZylochCommented:
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
 
BustaroomsCommented:
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
 
ZylochCommented:
Ah, that's my bad, sorry *looks sheepish*
0
Technology Partners: 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!

 
vishrutsumitAuthor Commented:
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
 
ZylochCommented:
How come it's not working? Make sure your handlePrint function is in the <head> section.
0
 
vishrutsumitAuthor Commented:
Actually the handlePrint method is getting called,but it doesnot print..I doono why
0
 
ZylochCommented:
Well, you never know until you try ;) Try this:

document.write('<html><body onload="self.print();">');
0
 
vishrutsumitAuthor Commented:
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
 
ZylochCommented:
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
 
vishrutsumitAuthor Commented:
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
 
BustaroomsCommented:
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
 
vishrutsumitAuthor Commented:
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
 
BustaroomsCommented:
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
 
BustaroomsCommented:
oh and this isnt limited to a javascript print call....it would print up like this if you go to File Print
0
 
vishrutsumitAuthor Commented:
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
 
BustaroomsCommented:
just curious if the css suggestion and link helped you figure it out
0
 
vishrutsumitAuthor Commented:
Just looking at it,will appreciate if you please provide more help if you can.

thanks
vishrut
0
 
ZylochCommented:
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
 
vishrutsumitAuthor Commented:
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!

  • 8
  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now