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

Chelsea_Clay · ‎02-27-2019

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

Prateek_Raj · ‎02-27-2019

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>

<h1>Print me</h1>

</div>

<h1>Do not Print me</h1>

</div>

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

Jay_Jiang · ‎02-27-2019

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

SanfordWhiteman · ‎02-27-2019

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

Prateek_Raj · ‎02-27-2019

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 · ‎02-27-2019

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 · ‎02-27-2019

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>

<h1>Print me</h1>

</div>

<h1>Do not Print me</h1>

</div>

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 · ‎02-27-2019

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 · ‎02-28-2019

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 · ‎02-28-2019

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.