WordPress ‘Function is not defined onclick’

I am currently working on a custom WordPress plugin. I have to use this specific folder structure:

plugins/ myplugin/ pdf.php

plugins/ myplugin/ inlude/main.js

pdf.php looks like this:

 function pdfmaker() {include('/wp-content/plugins/myplugin/include/main.js');   
    return '<button class="w-btn us-btn-style_3 us_custom_3a3dc668" type="button" value="Print_PDF" id="MakePDF delano" onclick="make_PDF()"> Print 
    PDF </button>'; }    add_shortcode('pdfmaker', 'pdfmaker'); 

but whenever i click on the button i get the error: Uncaught ReferenceError: make_PDF is not defined even when i have a function called make_PDF in my main.js file.

anyone knows how to resolve this problem

Answer

It should look something like this `

// First register resources with init 
add_action( 'init', 'myplugin_shortcode_resource' );

function myplugin_shortcode_resource() {
    wp_register_script("myplugin-shortcode-script",plugins_url("/include/main.js", __FILE__), ['jquery'], "1.0", false);

    //If you want a stylesheet ...
    wp_register_style("myplugin-shortcode-style", plugins_url("style.css", __FILE__), [], "1.0", "all");
}

add_shortcode( 'pdfmaker', 'pdfmaker' );

function pdfmaker() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script("myplugin-shortcode-script",['jquery']);
    wp_enqueue_style("myplugin-shortcode-style");
    return '<button class="w-btn us-btn-style_3 us_custom_3a3dc668" type="button" value="Print_PDF" id="MakePDF delano" onclick="make_PDF()"> Print 
PDF </button>';
}

`