SOLVED

JavaScipt Error: Cannot read property 'document' of undefined

Go to solution
Chelsea_Clay
Level 1

JavaScipt Error: Cannot read property 'document' of undefined

I'm working on a landing page that uses tokens to populate a certificate. Users need to be able to print their certificates. I used JavaScript for this in order to print just the certificate and not the whole landing page. I thought I was missing an addon from Marketo, but our representative said I should just be able to put the JavaScript into an HTML element. I did this and the code isn't working. I have the code working right locally. But as soon as I add the same code to the Marketo page, it doesn’t work. When I check the error, it says it cannot read the property “document” of undefined. But JavaScript is based off the document property so I don't understand why Markteto isn't reading it.

This is the button I have the code set to run on:

<div style="background-color: #00a0df; border-radius: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 26px; text-align: center; padding: 5px;">

<a href="javascript:printDiv('div1')" style="color: white; text-decoration: none;">Print</a>

</div>

This is the JavaScript I have to run when the Print btn is clicked:

<script>

printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')

function printDiv(divId) {

window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;

window.frames["print_frame"].window.focus();

window.frames["print_frame"].window.print();

}

</script>

If it helps, here is the link to the sample page: http://pages.chatsworth.com/Sample-Credit-Certificate-LP_Sample-Credit-Certificate-LP.html

1 ACCEPTED SOLUTION

Accepted Solutions
Prateek_Raj
Level 2

Re: JavaScipt Error: Cannot read property 'document' of undefined

Please check the below sample code, this will display the whole content but will Print only the "Div" mentioned in the "attribute"

<------Sample code starts-->

<html>

<body>

<div id="printableArea">

<h1>Print me</h1>

</div>

<div id="printableArea-1">

<h1>Do not Print me</h1>

</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

<script>

function printDiv(divName) {

var printContents = document.getElementById(divName).innerHTML;

var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;

}

</script>

</body>

</html>

View solution in original post

8 REPLIES 8
Jay_Jiang
Level 10

Re: JavaScipt Error: Cannot read property 'document' of undefined

More of a general javascript question... but anyway, here's an answer on stackoverflow: javascript - Print the contents of a DIV - Stack Overflow

SanfordWhiteman
Level 10 - Community Moderator

Re: JavaScipt Error: Cannot read property 'document' of undefined

Well, of course... you don't have a <frame> nor <iframe> with the name print_frame.

Prateek_Raj
Level 2

Re: JavaScipt Error: Cannot read property 'document' of undefined

Please try below code for your query, just add onclick="window.print()" to your submit button

Make the "Print" button in form tag.

<input type="button" value="Print" onclick="window.print()" />

This might help you.


SanfordWhiteman
Level 10 - Community Moderator

Re: JavaScipt Error: Cannot read property 'document' of undefined

Why are you changing the requirements? That's not delivering the same outcome:

in order to print just the certificate and not the whole landing page.
Prateek_Raj
Level 2

Re: JavaScipt Error: Cannot read property 'document' of undefined

Please check the below sample code, this will display the whole content but will Print only the "Div" mentioned in the "attribute"

<------Sample code starts-->

<html>

<body>

<div id="printableArea">

<h1>Print me</h1>

</div>

<div id="printableArea-1">

<h1>Do not Print me</h1>

</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

<script>

function printDiv(divName) {

var printContents = document.getElementById(divName).innerHTML;

var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;

}

</script>

</body>

</html>

SanfordWhiteman
Level 10 - Community Moderator

Re: JavaScipt Error: Cannot read property 'document' of undefined

Sorry, don't see the point of this code when the obvious (and easily solved) problem with Chelsea's code is that a frame was accidentally left out of the HTML.

You aren't just printing a <div> here, either, you're also wiping out all the event listeners in the original body and rerunning all inline scripts, not to mention reloading uncached assets. That's very, very disruptive. Writing to a frame, however primitive, is a relatively reasonable approach.

Jay_Jiang
Level 10

Re: JavaScipt Error: Cannot read property 'document' of undefined

Performance and user experience wise the answer above is not good. Consider using the stackoverflow answer:

function PrintElem(elem)

{

var mywindow = window.open('', 'PRINT', 'height=400,width=600');

mywindow.document.write('<html><head><title>' + document.title + '</title>');

mywindow.document.write('</head><body >');

mywindow.document.write('<h1>' + document.title + '</h1>');

mywindow.document.write(document.getElementById(elem).innerHTML);

mywindow.document.write('</body></html>');

mywindow.document.close(); // necessary for IE >= 10

mywindow.focus(); // necessary for IE >= 10*/

mywindow.print();

mywindow.close();

return true;

}

SanfordWhiteman
Level 10 - Community Moderator

Re: JavaScipt Error: Cannot read property 'document' of undefined

Chelsea, I see you ignored my warning about re-running JavaScript using this method. It's clear that you're creating duplicate AdWords + FloodLight hits now.