Javascript external file function not found

Hi all,

I’m trying to do a post request (another issue, for another topic), and have put my jQuery in an external js file inside my plugin’s folder. (This is for an admin side settings, and thus am unable to supply the link)
When trying to call the function to initiate my post request, the javascript isn’t found despite being loaded in the header by admin_enqueue_scripts().

tldr; when calling js function from a js file, HTML doesn’t find it.

I have done the following to enqueue,

function my_enqueue($hook) {
    wp_enqueue_script( 'ajax-script', plugins_url("/js/my-jquery.js",__FILE__), array('jquery'));

    $title_nonce = wp_create_nonce( 'title_example' );
    wp_localize_script( 'ajax-script', 'my_ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
		'nonce'    => $title_nonce));
}
add_action('admin_enqueue_scripts', 'my_enqueue');

The script tags show up in the Chrome debugger when I’m testing the page, as a src’ed script.
e.g.
<script src="<Link to file from Plugins_url("/js/my-jquery.js")>"></script>

But, when I call my js function with the following HTML it returns an
“Undefined function: closeShop() at <Onclick’s line number and file>” error

function SettingOpenMenu()
{
echo <<< 'EOD'

<h2> Is your Shop open?</h2>
  <p id="Status">The shop is Open</p>
  <button onclick='openShop()'>Indicate Open</button>
  <button onclick="closeShop()">Indicate Closed</button>

EOD;
}

Am I doing something wrong with the loading of the JS file?
Any help appreciated

Contents of js file

function openShop()
{
	document.getElementById("Status").innerHTML = "The shop is Open";
	//the following POST code has been taken from https://pastebin.com/3VxAWpqZ and modified.
	jQuery(document).ready(function(jQuery) {           //noConflict wrapper
 
             
//
//Note: If I remove the jquery code from both functions, I still get "undefined" error
//
            
        jQuery.post(my_ajax_object.ajax_url,
		{_ajax_nonce: my_ajax_obj.nonce, 
		action: "open_pressed"},
		function(response){
		console.log(response);
		});                              
        
    });

}

function closeShop(){
	document.getElementById("Status").innerHTML = "The shop is Closed";

	//the following POST code has been taken from https://pastebin.com/3VxAWpqZ and modified.
	jQuery(document).ready(function(jQuery) {           //noConflict wrapper
 
              //event
            
        jQuery.post(my_ajax_object.ajax_url,
		{_ajax_nonce: my_ajax_obj.nonce, 
		action: "close_pressed"},
		function(response){
		console.log(response);
		});                              
        
    });

}

Full php code, couldn’t get Pastebin to work.

<?php
/*
Plugin Name: isItOpen
Plugin URI: 
Description: Indicator for Jenni Taris's shop.
Author: Tree_house
Author URI: https://youtube.com/microtechtutorials
Version: 0.1
*/
function my_enqueue($hook) {
    wp_enqueue_script( 'ajax-script', plugins_url("/js/my-jquery.js",__FILE__), array('jquery'));

    $title_nonce = wp_create_nonce( 'title_example' );
    wp_localize_script( 'ajax-script', 'my_ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
		'nonce'    => $title_nonce));
}
add_action('admin_enqueue_scripts', 'my_enqueue');

//
//Gets the bool from the SQL table, and checks if it exists otherwise it creates it.
//
$default_value = false;
if (FALSE === get_option('my_option') && FALSE === update_option('my_option',FALSE)) add_option('my_option',$default_value);
$isOpen = get_option('my_option'); //sets the $isOpen variable to the sql version of the item;

function setIsOpen($isOpen){
update_option('my_option', $isOpen);	
}//after each set of $isOpen, it updates the database version.

add_action("admin_menu", "addMenu");
function addMenu()
{
  add_menu_page("Shop Open Indicator", "Shop Open Indicator", 4, "ShopIndicator", "SettingOpenMenu" );
  
}

 
 
 
 

function SettingOpenMenu()
{
echo <<< 'EOD'

<h2> Is your Shop open?</h2>
  <p id="Status">The shop is Open</p>
  <button onclick='openShop()'>Indicate Open</button>
  <button onclick="closeShop()">Indicate Closed</button>

EOD;
}

function open_pressed(){
	throw new Exception('Division by zero.');
check_ajax_referer( 'title_example' );
	throw new Exception('Division by zero.');
	$isOpen = true;
	setIsOpen($isOpen);	 
	wp_send_json("success");
}

function close_pressed(){
	
	check_ajax_referer( 'title_example' );
	echo <<< 'EOD'
	
	<header> received </header>
	EOD;
	$isOpen = false;
	setIsOpen($isOpen);
	wp_send_json("success");
    
	
}

add_action("wp_ajax_open_pressed","open_pressed");
add_action("wp_ajax_close_pressed","close_pressed");

//
//
//function that runs when shortcode is called
//
function wpb_OpenClosed_Shortcode() 
{ 
					
					 if($isOpen){
					$string .= '<div id="demobox">
						We are OPEN right now!
						</div>
						<style>
						#demobox {
   						background-color: #cfc ;
  						padding: 10px ;
  						border: 1px solid green ;
						}
						</style>'; 
 						}
					elseif (FALSE == $isOpen){
						$string .= '';
						}
					else{
						$string .= '<p>Not getting Is Open</p>';
}
					
						
	
						// Output needs to be return
						//return $string;
			
	
			return $string;
} 
		// register shortcode
		add_shortcode('OpenClosed', 'wpb_OpenClosed_Shortcode');
?>

• This topic was modified 4 years, 6 months ago by acs609. Reason: made clearer my issue
• This topic was modified 4 years, 6 months ago by acs609.
• This topic was modified 4 years, 6 months ago by acs609.