Pulling data from custom plugin settings using PHP shortcode and Javascript

The error you’re seeing in JS is due to those elements not existing, thus the cannot read property value of null

You’re JS is using the HTML element output only in the countdownMenu function that is only called when on that specific menu page.

You need to output the value, even if in a hidden div, for your JS to work correctly:

function mbc_cdc_shortcode() {

    ?>
    <div class="mbc-cdc-clock-onpage">
        <input type="hidden" id="mbc-cdc-date" value="<?php echo esc_attr( get_option( 'cdc_datepicker' ) ); ?>">
        <input type="hidden" id="mbc-cdc-timepicker" value="<?php echo esc_attr( get_option( 'cdc_timepicker' ) ); ?>">
        <div><span id="mbc-cdc-onpage-days">  H</span></div>
        <div><span id="mbc-cdc-onpage-hours">  E</span></div>
        <div><span id="mbc-cdc-onpage-minutes">  LL</span></div>
        <div><span id="mbc-cdc-onpage-seconds">  O</span></div>
    </div>  </div>

    <?php
}

You should also put your JS code inside something that will only execute it once the DOM is loaded and ready (think that may be reason for null errors):

document.addEventListener("DOMContentLoaded", function(event) {
    // DOM is ready and loaded
});

Or if using jQuery there’s a few way to do this:

jQuery(document).ready(function() {
    // DOM ready
});

Which is the same as

jQuery(function(){
    // DOM ready
});

If you want $ to be available since jQuery in WordPress noConflict (meaning $ is not set to jQuery object), you can use self invoking func passing jQuery object:

(function($){

    $(function(){
        //dom ready
    });

})(jQuery);