window.print() doesn't work

Question

I'm trying to print a document by using a button, but every time I try the button it doesn't work.

        var printContents = document.getElementById("test").innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;

And when that doesn't work I open the console and try it, but then I get this

TypeError: Cannot read property 'innerHTML' of null

I've trie creating an empty html page with nothing on it but a phrase and a button that runs the code.

function print(){
window.print();
}

But that doesn't do anything either.

edit: Isn't there a way with only JavaScript? This is the last thing I have to do for my school project but I don't know Jquery :s and the teacher said it's possible with Javascript.

`window.print();` should just work fine. Are you sure it is in that code that you have an error. (check what line the error is on via your console) — putvande, Dec 02 '13 at 17:34
While the question is valid - this isn't' optimal when printing content from the web. Have a look at a print stylesheet rather than passing content between Div's — LiamB, Dec 02 '13 at 17:43
This printing method beats even opening a new window for printing ; ). — Teemu, Dec 02 '13 at 17:45

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

You need to wait for the document to be ready before attempting to access any of the elements on the page.

There are many pages on SO and elsewhere which deal with this topic. Here's one:

$(document).ready equivalent without jQuery

edited May 23 '17 at 12:12

Community

1
1

answered Dec 02 '13 at 17:33

Kyle Falconer

7,586
5
44
63

LiamB · Answer 2 · 2013-12-02T17:50:07.233

Looks like your accessing the elements before the document is ready - can you include something like jQuery?

See here : http://jsbin.com/edeNIPE/1/

However, this is not an optimal way to print content, have you considered using a Print style sheet (http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/) to allow you to hide an show elements?

@media print {
   .some-class{
       display:none;
   }
}

As requested if you don't want to use JQuery: http://jsbin.com/edeNIPE/1/

function init(){
  var printContents = document.getElementById("test").innerHTML;
  var originalContents = document.body.innerHTML;
  document.body.innerHTML = printContents;

  window.print();
  document.body.innerHTML = originalContents;
 };

window.onLoad = init();

Thanks, it works :) I love how so many people respond to questions so fast ^^ — user3052776, Dec 02 '13 at 17:55

Ani · Answer 3 · 2013-12-02T17:54:47.190

0

Here try this: Okay Here it is: Fiddle

HTML

<button onclick="myFunction()">Click me</button>
<div id="test">This is supposed to print</div>

CSS

#test
{
   display:none;
}
 @media print {
    #test
   {
       display:block;
   }

 }

JS - Though I am not sure why you are trying to get innerHTML - you should just call the function and and do window.print(); - That should do it.

function myFunction ()
{
    var printContents = document.getElementById("test").innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;

    window.print();

    document.body.innerHTML = originalContents;
}

edited Dec 02 '13 at 17:54

answered Dec 02 '13 at 17:39

Ani

4,241
4
23
29

Inline javascript at the element level is the old way of doing things and is unmaintainable for large projects. – Kyle Falconer Dec 02 '13 at 17:42
I know, but I am not sure what he's doing exactly. Since his question is so perplexing, I was hoping he could at least get something going first. – Ani Dec 02 '13 at 17:44
Based on the question, I believe the questioner is grabbing innerHtml to replace the current site content with his print content. A print StyleSheet would be a preferred solution. – LiamB Dec 02 '13 at 17:46

window.print() doesn't work

3 Answers3