JavaScipt Error: Cannot read property 'document' of undefined | Community
Skip to main content
Chelsea_Clay
Chelsea_Clay
Level 1
February 27, 2019
Solved

JavaScipt Error: Cannot read property 'document' of undefined

  • February 27, 2019
  • 4 replies
  • 17132 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Prateek_Raj

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>

4 replies

Jay_Jiang
Jay_Jiang
Level 10
February 28, 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
SanfordWhiteman
Level 10
February 28, 2019

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

    Prateek_Raj
    Prateek_Raj
    Level 2
    February 28, 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
    SanfordWhiteman
    Level 10
    February 28, 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
    Prateek_RajAccepted solution
    Level 2
    February 28, 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>

    <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
    SanfordWhiteman
    Level 10
    February 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.

      Terms & ConditionsAccessibility statement

      Loading footer...