Why won't my HTML file find my javascript file?

Question

I have a simple HTML file that I am trying to link to a javascript file. Both are in C:\\Users\\Me\\Test (so there's C:\\Users\\Me\\Test\\Test.html and C:\\Users\\Me\\Test\\test.js)

HTML:

<!doctype html>
<html>
<head>
    <title>SoundCloud API</title>
    <script src="http://connect.soundcloud.com/sdk.js"></script>
    <script src="test.js"></script>

</head>
<body>
    <ul>
        <li><a href="#" class="genre">EDM</a></li>
        <li><a href="#" class="genre">classical</a></li>
        <li><a href="#" class="genre">soundtrack</a></li>
    </ul>
    <div id="target"></div>
</body>
</html>

and Javascript:

function playSomeSound(genre){
    SC.get('/tracks', {
        genres: genre,
        bpm: {
            from: 100
        }
    }, function(tracks){
        var random = Math.floor(Math.random()*49);
        SC.oEmbed(tracks[random].uri, {auto_play: true}, document.getElementById('target'));
    });
}

window.onload = function(){
    SC.initialize({
        client_id: '*******'
    });

    var menuLinks = document.getElementsByClassName('genre');
    for (var i = 0; i < menuLinks.length; i++){
        var menuLink = menuLinks[i];
        menuLink.onclick = function(e){
            e.preventDefault();
            playSomeSound(menuLink.innerHTML);
        };
    }
};

(Note the Client ID is actually the correct ID in the code.)

The HTML correctly displays the three links, but nothing happens when I click them. Am I missing something?

For what it's worth, I'm following this tutorial. Thanks for any ideas/tips!

Edit: Note, when the HTML page loads, I can View Source, then click the "test.js" and it does actually load the Javascript source...so it is seeing the JavaScript correctly, leading me to think there's something up with the Javascript itself...

Edit 2: I was able to get the editor I'm using (SublimeText 2) to build javascript, and get this error:

function (tracks){

SyntaxError: Unexpected token (

meaning it's not expecting the "(" after "function"?...maybe that helps?

Edit 3: Okay, I've been searching around and was able to get a different error, by adding {} around the BPM:

function playSomeSound(genre){
    SC.get('/tracks', {genres: genre}, {bpm: { from: 100 }},
        function(tracks){
            var random = Math.floor(Math.random()*49);
            SC.oEmbed(tracks[random].uri, {auto_play: true}, document.getElementById('target'));
        });
    console.log(genre);
}


window.onload = function(){
    SC.initialize({
        client_id: "6e6078f1408f62443f757b4c34d55e12"
    });

    var menuLinks = document.getElementsByClassName('genre');
    for (var i = 0; i < menuLinks.length; i++){
        var menuLink = menuLinks[i];
        menuLink.onclick = function(e){
            e.preventDefault();
            playSomeSound(menuLink.innerHTML);
        };
    }
};

Now, I get the error:

window.onload = function(){

ReferenceError: window is not defined

Answer 1

Actually, the problem is not coming from you. The javascript file has been correctly loaded (try to add this code :

function playSomeSound(genre){
    SC.get('/tracks', {
    genres: genre,
    bpm: {
        from: 100
    }
}, function(tracks){
    var random = Math.floor(Math.random()*49);
    SC.oEmbed(tracks[random].uri, {auto_play: true}, document.getElementById('target'));
});
}

window.onload = function(){
SC.initialize({
    client_id: '*******'
});

    alert("Hello! I am an alert box!!");
var menuLinks = document.getElementsByClassName('genre');
for (var i = 0; i < menuLinks.length; i++){
    var menuLink = menuLinks[i];
    menuLink.onclick = function(e){
        e.preventDefault();
        playSomeSound(menuLink.innerHTML);
    };
}
};

in your javascript file

and the html :

<html>
<head>
<title>SoundCloud API</title>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="test.js"></script>

</head>
<body>
<ul>
    <li><a href="#" class="genre">EDM</a></li>
    <li><a href="#" class="genre">classical</a></li>
    <li><a href="#" class="genre">soundtrack</a></li>
</ul>
<div id="target"></div>
</body>
</html>

This tutorial was made in 2012 (it's a long long time ago), maybe the script is out of date or something like that.

Answer 2

You should load all your JavaScript files at the very end of the body, just before the </body> tag. This will make JavaScript run more predictably and reliably and is likely the cause of the problem here. There are very few circumstances when you'll want the JavaScript to be called anywhere else.

Why won't my HTML file find my javascript file?

Question

2 answers

solution1
0 2014-12-18 01:04:37

solution2
0 2014-12-18 05:24:42

Why won't my HTML file find my javascript file?

Question

2 answers

solution1 0 2014-12-18 01:04:37

solution2 0 2014-12-18 05:24:42

solution1
0 2014-12-18 01:04:37

solution2
0 2014-12-18 05:24:42