-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ファイルがあります。ファイルの名前は上部にあります

プレイリストストア.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 が実行されていません。

プレイリストストア.jsで

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

で文字列を開きますが、で'閉じようとし"ます。一貫している限り、どちらを使用しても問題ないため、'playlist'またはに変更できます"playlist"。

if (playlistArray !Null) {

null でないことを確認しようとしている場合は、次のplaylistArrayことができます

if (playlistArray != null) {

!=比較として注意し、null小文字にする必要があります。未定義または null だけではないことを確認したい場合は、単に行うことができますif (!playlistArray)。

ul.appenChild(li);である必要がありますul.appendChild(li);。

他にもあると思います。コードを確認してください。

于 2013-10-18T16:05:40.367 に答える
-1

スクリプトの最初の行 (および単なる関数定義ではない唯一の行) はwindow.onload = init;. これは、ページが読み込まれた後にinit関数が呼び出されることを意味します。

この関数は idaddbuttonで要素を検索し、返された結果に対してメソッドを呼び出します。この ID を持つ要素がないため、返されるオブジェクトはなく、例外がスローされます (ブラウザによっては、「ボタンが null またはオブジェクトではありません」など)。この例外は、メソッドのそれ以上の実行を停止します。特に、loadPlaylist()呼び出されません。

ただし、ここでの教訓は、特に開発中は JavaScript エラー コンソールに注意を払うことです。ブラウザーには、ほぼ確実に赤い感嘆符アイコンまたは類似のアイコンが表示されます。これをダブルクリックすると、例外の名前、メッセージ、および場所が表示されます。

ブラウザがすでに問題の場所を正確に伝えることができる場合、スタック オーバーフローにコード リストを投稿して何が問題なのかを尋ねる必要はありません。

于 2013-10-18T16:05:37.337 に答える