wordpress won’t load my js files

trying to use vanilla javascript in a website i’m making for a client. i’ve worked with it a lot but it appears not to be loading the file at all. here is the code in my functions.php to load it:

<?php
function website_files(){
    wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js', array(), '', true);
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_enqueue_script( 'script-name', get_template_directory_uri());

}
add_action('wp_enqueue_scripts','website_files');
?>

and here is my style.css file:

#box {
    background-color: blue;
    width: 100px;
    height: 100px;
    opacity: 1;
}

and here is the html in my index.php:

<?php
get_header();?>

<h1>Website Title</h1>
<div id = "box">

</div>

I’m basically just trying to have the javascript change the color of the div with the id “box” from blue to green. I tried to code this as a test to see if my javascript files would actually get loaded and they didn’t. not sure what I’m doing wrong here. could someone please help me?