WordPress doesn't let me use my print button-CodePudding

I'm having a problem with my Wordpress...

I want to add a print button on my page that prints an image on my page. But every tutorial I find just doesn't work on Wordpress, although working on Codepen, Stackoverflow replies, or on local html files on my laptop...

For exemple, this code works perfectly, but not on my page. I tried putting the HTML code in a HTML section and the JS in the page settings of Elementor. I've also tried putting everything in the HTML.

I can't seem to find a solution. Maybe Wordpress blocks my Javascript ?

If someone could help me, you'd be my lifesaver! Thank you

Code pen code (that i have adapted for my image):

<table border="1" cellpadding="3" id="printTable">
    <tbody><tr>
        <th>First Name</th>
        <th>Last Name</th>      
        <th>Points</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>      
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>        
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>        
        <td>80</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>        
        <td>67</td>
    </tr>
</tbody></table>
<br />
<br />
<table border="1" cellpadding="3" id="notPrintTable">
    <tbody><tr>
        <th>First Name</th>
        <th>Last Name</th>      
        <th>Points</th>
    </tr>
    <tr>
        <td>test</td>
        <td>test</td>       
        <td>000</td>
    </tr>
</tbody></table>
<br />
<br />

<button>Print me</button>

function printData()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})

CodePudding user response：

try to add jquery 3 cdn and check if works

CodePudding user response：

You're doing a basic mistake here. In WordPress, $ will give you undefined. you'll have to use jQuery to access the jquery object in WordPress.

So whenever you work with WordPress jquery either wrap your Js code withing document.ready

jQuery( document ).ready( function( $ ) {
// Your code goes here.
} );

or you can wrap it within a function like this:

( function( $ ) {
// Your code goes here.
}( jQuery ) );

Then you can use $ since we have passed in function as jQuery reference(I don't know what should I call it reference or something else, Correct me in the comments please)

So your code should be like this:

( function( $ ) {
    function printData() {
        const divToPrint = document.getElementById( 'printTable' );
        const newWin = window.open( '' );
        newWin.document.write( divToPrint.outerHTML );
        newWin.print();
        newWin.close();
    }

    $( 'button' ).on( 'click', function() {
        printData();
    } );
}( jQuery ) );