The following code works as expected on my WordPress setup, but when I send it to my friend who is running a cPanel managed version of WordPress, the JavaScript never runs. I can inspect the DOM and see that the js-test
div is inserted though, verifying that the php ran. Any thoughts on what might be causing this? Am I doing something improper with the way I am enqueuing the script? I’d ideally like to only enqueue the script if the plugin’s shortcode is present on the page, to avoid an unnecessary request.
js-test.php
<?php
/*
Plugin Name: JS Test
Description: JS Test
Version: 1.0
License: MIT
License URI: https://opensource.org/license/mit
*/
add_shortcode( 'js_test', function( $atts, $content, $tag ) {
add_action("wp_enqueue_scripts", function() {
wp_enqueue_script('js-test', plugin_dir_url( __FILE__ ) . 'js-test.js');
});
return "<div id='js-test' />";
});
js-test.js
document.addEventListener('DOMContentLoaded', function() {
const target = document.getElementById("js-test");
console.log('target: ', target);
if (target == null) {
return;
}
target.innerHTML = "hello!!!";
});