Question

我有一个简单的HTML文件，我试图链接到一个javascript文件。两者都在C：\ Users \ Me \ Test中（所以有C：\ Users \ Me \ Test \ Test.html和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>

和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);
        };
    }
};

（请注意，客户端ID实际上是代码中的正确ID。）

HTML正确显示三个链接，但单击它们时没有任何反应。我错过了什么吗？

为了它的价值，我正在关注this教程。感谢您的任何想法/提示！

编辑：注意，当HTML页面加载时，我可以查看源代码，然后单击“test.js”，它实际上加载了Javascript源...所以它正确地看到了JavaScript，让我觉得有与Javascript本身有关...

编辑2： 我能够得到我正在使用的编辑器（SublimeText 2）来构建javascript，并得到这个错误：

功能（曲目）{

SyntaxError：意外的令牌（

意味着它不期待“（”之后的“功能”？...也许这有帮助吗？

编辑3： 好的，我一直在搜索并通过在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);
        };
    }
};

现在，我收到错误：

window.onload = function（）{

ReferenceError：未定义窗口

Answer 1

实际上，问题并非来自你。 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: '*******'
});

    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);
    };
}
};

在你的javascript文件中

和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>

本教程是在2012年制作的（很久很久以前），也许剧本已经过时或类似。

Answer 2

您应该在正文的最后加载所有JavaScript文件，就在</body>标记之前。这将使JavaScript运行更加可预测和可靠，并且可能是此问题的原因。在您希望在其他任何地方调用JavaScript的情况非常少。

为什么我的HTML文件找不到我的javascript文件？

2 个答案: