My code will not execute in wordpress, even though I've been told the code is fine

Question

I am battling with a problem for months now, that my code will not execute or show the result, when I enqueue it. I have been told, that my code is fine, and that it should work. The clock is showing, so the css and html is correct, but not doing anything. Here it is:

<?php

function childtheme_parent_styles() {
 wp_enqueue_style( 'parent', get_template_directory_uri().'css/style.css' );
function mytheme_files() {
 wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());
wp_register_script('main-js', get_stylesheet_directory_url() . '/js/main.js');
}

add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

wp_register_script('main-js',get_stylesheet_directory_url().'/js/main.js');

}

add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );
}

function pr_scripts_styles() {
if( is_page(507) ) {
wp_enqueue_script( 'main-js');      


}

The js code is in a folder named js and in a file named main.js

setInterval(() => {
    d = new Date(); //object of date()
    hr = d.getHours();
    min = d.getMinutes();
    sec = d.getSeconds();
    hr_rotation = 30 * hr + min / 2; //converting current time
    min_rotation = 6 * min;
    sec_rotation = 6 * sec;
  
    hour.style.transform = `rotate(${hr_rotation}deg)`;
    minute.style.transform = `rotate(${min_rotation}deg)`;
    second.style.transform = `rotate(${sec_rotation}deg)`;
}, 1000);

<?php

function childtheme_parent_styles() {
    wp_enqueue_style( 'parent', get_template_directory_urI().'/css/style.css' );
    function mytheme_files() {
        wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());
        wp_register_script('main-js', get_stylesheet_directory_uri() . '/js/main.js');
    }

    add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

    wp_register_script('main-js',get_stylesheet_directory_uri(). '/js/main.js');

}

add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );
}

function pr_scripts_styles() {
    if( is_page(507) ) {
        wp_enqueue_script( 'main-js');
    }

Will check the dev tools.

Answer 1

There are two errors I see in your code. First is that you've written get_stylesheet_directory_url() instead of get_stylesheet_directory_uri(). Switch the L for an I and that will probably fix it.

Second, for the JS file you're adding a slash before the folder, and for the CSS you're not. Once you fix the URL/I issue, you may still need to remove the /

Update I've reviewed and updated your enqueue styles. There were a number of issues, but I've tightened it up, and this will load your styles and scripts:

function childtheme_parent_styles() {
    wp_enqueue_style('parent', get_template_directory_uri().'/css/style.css' );
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());
    wp_register_script('main-js', get_stylesheet_directory_uri() . '/js/main.js');
    if( is_page(507) ) {
        wp_enqueue_script( 'main-js');
    }
}

add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Good luck!