-2

所以我遇到了 HTML5 和 javascript 的问题。我为 javascript 部分制作了一些 .js 文件，并创建了链接以将其与 HMTL 代码连接起来，但它不会显示 javascript 部分。这是我的 HTML

<!doctype html>
<html lang="en">
<head>
<title>Gateway Tunes</title>
  <meta charset="utf-8" />
<script src="playlist_store.js"></script>
<script src="playlist.js"></script>
 </head>
 <body>

<form> 
    <input type="text" id="songTextInput" size="40" placeholder="Song name">
    <input type="button" id="addButton" value="Add Song">
</form>
<ul id="playlist">
</ul>
</body>
</html>

这是我的javascript文件；文件名在顶部

playlist_store.js

function save(item) {
    var playlistArray = getStoreArray("playlist"); 
    playlistArray.push(item);
    localStorage.setItem("playlist", JSON.stringify (playlistArray));
    }
function loadPlaylist() {
    var playlistArray = getSavedSongs();
    var ul = document.getElementById('playlist");
    if (playlistArray !Null) {
        for (var i = 0; i < playlistArray.length; i++) {
        li.innerHTML = playlistArrray[i];
        ul.appenChild(li);
        }
    }
}

function getSavedSongs() {
    return getStoreArray("playlist")
}
function getStoreArray (key);
    var playlistArray = localStorage.getItem(key);
    if(playlistArray == null || playlistArray == "") {
        playlistArray = new Array();
    }
    else {
        playlistArray = JSON.parse (playlistArray);
    }
    return playlistArray;
}

播放列表.js

window.onload = init;
function init() {
    var button = document.getElementById ("addButton");
    button.onclick = handleButtonClick;
    loadPlaylist();
}
function handleButtonClick () {
    var textInput = document.getElementById("songTextInput");

var songName = textInput.value;

if (songName == "") {
    alert("Button was clicked!");
    }
    else {

 alert("Your track has been added!");

 }
    var li = document.createElement("li");

    li.innerHTML = songName;

    var ul = document.getElementById("playlist");

    ul.appendChild(li);
    save (songName);
  }
4

2 回答 2

0

你有一些语法错误，所以你的 javascript 没有运行。

在 playlist_store.js

var ul = document.getElementById('playlist");

用 打开一个字符串，'但尝试用 关闭它"。只要您保持一致，使用哪个都没有关系，因此您可以将其更改为'playlist'或"playlist"。

if (playlistArray !Null) {

如果你想确保playlistArrayis not null 你可以做

if (playlistArray != null) {

注意!=作为比较并且null需要小写。如果你想确保它不仅仅是 undefined 或 null 你可以简单地做if (!playlistArray).

ul.appenChild(li);需要ul.appendChild(li);。

我确定还有更多，请检查您的代码。

于 2013-10-18T16:05:40.367 回答
-1

脚本的第一行（也是唯一不只是函数定义的）是window.onload = init;. 这意味着在页面加载后，您的init函数将被调用。

此函数查找具有 id 的元素addbutton，然后对返回的结果调用方法。由于您没有具有此 ID 的元素，因此不会返回任何对象，因此将引发异常（类似于“按钮为空或不是对象”，具体取决于您的浏览器）。此异常会阻止该方法进一步执行 - 特别是loadPlaylist()不会被调用。

这里故事的寓意是注意 JavaScript 错误控制台，尤其是在您进行开发时！您的浏览器几乎肯定会显示一个红色感叹号图标或类似的图标，您可以双击它来为您提供异常的名称、消息和位置。

当您的浏览器已经能够准确地告诉您问题出在哪里时，您真的不需要在 Stack Overflow 上发布您的代码清单来询问我们它有什么问题。

于 2013-10-18T16:05:37.337 回答