Custom Plugin - CSS works, JS doesn't

Question

In the plugin I'm making, I use separate js and css files (____.js, ____.css). This is the first time that I've included an external .js file in anything.

I'm registering and enqueueing both in the following way, in the plugin's main ___.php file:

function CA_register_plugin_styles() {
wp_register_style( 'CA_2014_bookpage_css', plugins_url( '/CA_2014-bookpage-plugin/CA_2014_bookpage-css.css' ) );
wp_enqueue_style( 'CA_2014_bookpage_css' );
}
add_action( 'wp_enqueue_scripts', 'CA_register_plugin_styles' );

function CA_register_plugin_script() {
wp_register_script( 'CA_2014_bookpage_js', plugins_url( '/CA_2014-bookpage-plugin/CA_2014-bookpage-plugin.js', __FILE__) );
wp_enqueue_script( 'CA_2014_bookpage_js' );
}
add_action( 'wp_enqueue_scripts', 'CA_register_plugin_script' );

I tried everything to get that to work for the JS. It didn't. (The CSS styles loaded correctly, however.) So I said heck with it, and added a direct reference to the script in a proper place within the head tag of my header.php, as follows:

<script src="<?php plugins_url('/CA_2014-bookpage-plugin/CA_2014-bookpage-plugin.js', __FILE__); ?>" type="text/javascript"></script>

That didn't work either. I double-checked that it's being included in the page (something that never happened while I was trying to properly enqueue it), and the script tag with src is there - but none of the functions I call are defined (which the lovely in-browser JavaScript console is so happy to tell me.)

I can only conclude that there is some fatal error in my JavaScript file, but JSLint couldn't find it.

So I thought I'd throw it to the StackOverflow community! What could possibly be wrong, with my JS file, my registering/enqueueing, etc.? (My plugin is active [but not when I go in to edit it.] I don't use JQuery. There is no script tag within the .js file. What else is there to it?)

The entirety of the JavaScript file is below (omitting nothing).

Please let me know if you find anything! And thanks in advance.

---

    var ActiveTimeout = NaN;
    var FromPage = NaN;

    function Handle_Book() {
        document.getElementsByClassName("ca_book")[0].style.display = "block";
        document.getElementsByClassName("ca_book")[0].style.left = "0";
        FromPage = 0;
        //window.alert("Book Handled");
        Handle_Book_Height();
        document.getElementById("Book_Bar_Bottom").innerHTML = "1 of " + document.getElementsByClassName("ca_book").length.toString();
    }


    function Handle_Book_Height() {
        var h = 0;
        var col = document.getElementsByClassName("ca_book");
        for (var i = 0; i < col.length; i++) {
            if (parseFloat(col[i].clientHeight) > h) {
                h = parseFloat(col[i].clientHeight);
            }
        }
        document.getElementById("Book").style.height = h.toString() + "px";

        window.setTimeout(Handle_Book_Height, 250);
    }


    function Book_Button(direction) {

        var col = document.getElementsByClassName("ca_book");

        //var from = -1;
        //var t = 0;
        //for (t = 0; t < col.length; t++) {
        //  if (parseFloat(col[t].style.left) == 0) {
        //      from = t;
        //  }
        //}

        var from = FromPage;
        if (from == NaN) { return; }

        //alert(col.length);

        var to = from + direction;

        if (to < 0) {
            to = col.length - 1;
        } else if (to >= col.length) {
            to = 0;
        }

        //if (direction < 0) { alert("To: " + to.toString() + "; From: " + from.toString()); }

        /*if (ActiveTimeout != null) {
            clearTimeout(ActiveTimeout);
            ActiveTimeout = null;
        }*/

        //if ((!(to == 0 && direction == 1)) && (!(to == col.length - 1 && direction == -1))) {
        if ((!(to == 0 && from == col.length - 1)) && (!(to == col.length - 1 && from == 0))) {
            // Non-looping case
            Lerp_Page(from, to, direction * 5);

        } else {
            // Looping case
            for (var c = 0; c < col.length - 1; c++) {
                Lerp_Page(from-(direction*c), from-(direction*(c+1)), -direction * 10);

                //alert((c*250).toString());
                /*window.setTimeout(
                    function() {
                        Lerp_Page(from-(direction*c), from-(direction*(c+1)), -direction * 10);
                    }, c+10 );*/
                //alert("Looping");
            }
        }
    }


    function Lerp_Page(from, to, speed) {
        // from and to are indices; sign of speed indicates which side to is coming from
        var pgs = document.getElementsByClassName("ca_book");

        if (pgs[to] == null || pgs[from] == null || FromPage != from) {
            //alert("PROBLEM - To: " + to.toString() + "; From: " + from.toString());
            setTimeout(function () { Lerp_Page(from, to, speed); }, 20 );
            return;
        }

        if (parseFloat(pgs[from].style.left) == 0) {
            if (speed > 0) {
                pgs[to].style.left = "100%";
            } else {
                pgs[to].style.left = "-100%";
            }
            pgs[to].style.display = 'block';
            document.getElementById("Book_Bar_Bottom").innerHTML = (to+1).toString() + " of " + document.getElementsByClassName("ca_book").length.toString();
        }

        var dsign = 1;
        if (speed < 0) { dsign = -1; }

        if (parseFloat(pgs[to].style.left) * dsign > 0) {
            pgs[to].style.left = (parseFloat(pgs[to].style.left) - speed).toString() + '%';
            pgs[from].style.left = (parseFloat(pgs[from].style.left) - speed).toString() + '%';
        }

        if (parseFloat(pgs[to].style.left) * dsign <= 0) {
            pgs[to].style.left = '0';
            pgs[from].style.display = 'none';
            ActiveTimeout = null;
            FromPage = to;
            return true;
        }

        ActiveTimeout = setTimeout(function () { Lerp_Page(from, to, speed); }, 20 );

    }

Answer 1

Would you please try below code to your plugin page. if the script file is your plugin root directory.

function plugin_adding_scripts() {
 wp_register_script('my_test_script', plugins_url('testscript.js', __FILE__), array('jquery'),'1.1', true);
 wp_enqueue_script('my_test_script');
}

 add_action( 'wp_enqueue_scripts', 'plugin_adding_scripts' ); 

Also: http://blog.aztora.com/add-css-js-into-wordpress-plugin/