HTML5和JavaScript的新手，我無法將JavaScript文件連接到HTML文件？

-2

所以我遇到了HTML5和javascript的問題。我爲javascript部分製作了一些.js文件，並且將鏈接與HMTL代碼連接起來，但它不會顯示javascript部分。這是我的HTMLHTML5和JavaScript的新手，我無法將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; 
}

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

來源

2013-10-18 eric herrera

@Pshemo來這裏發表評論。 –

'var ul = document.getElementById（'playlist「）;'有錯誤，請將其更改爲單引號或雙引號 – cjd82187

無論您如何編寫這些內容，如果您打算編寫正確語法高亮顯示的編輯器代碼。StackOverflow的基本語法突出顯示單獨應該幾乎告訴你在哪裏你犯了一個錯誤。 –

-1

腳本的第一行（也是唯一一個不只是一個功能定義）是window.onload = init;。這意味着在頁面加載後，你的函數被調用。

該函數查找ID爲addbutton的元素，然後調用返回結果的方法。因爲你不需要有這個ID的元素，所以不會有任何對象返回，所以會拋出一個異常（類似於「按鈕爲空或不是對象」，具體取決於你的瀏覽器）。此異常會阻止該方法進一步執行 - 特別是，不會調用loadPlaylist()。

這裏的故事的寓意，雖然是講究JavaScript錯誤控制檯，特別是當你在做開發！您的瀏覽器幾乎肯定會顯示一個紅色的感嘆號圖標或類似的圖標，您可以雙擊該圖標以提供該例外的名稱，消息和位置。

你真的不需要在Stack Overflow上發佈你的代碼清單來詢問我們當你的瀏覽器已經能夠準確地告訴你問題出在哪裏時，它有什麼問題。

來源

2013-10-18 16:05:37

確實有一個元素ID爲'addButton'。' – Snuffleupagus

你有一些語法錯誤，所以你的JavaScript沒有運行。

在playlist_store.js

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

打開一個字符串'而是嘗試與"關閉它。只要你一致，你使用哪一個並不重要，所以你可以將它改爲'playlist'或"playlist"。

if (playlistArray !Null) {

如果你想確保playlistArray不爲空，你可以做

if (playlistArray != null) {

通知!=作爲比較和需求null要小寫。如果你想確保它不只是undefined或null，你可以簡單地做if (!playlistArray)。

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

我相信還有更多，檢查你的代碼。

來源

2013-10-18 16:05:40 Snuffleupagus

HTML5和JavaScript的新手，我無法將JavaScript文件連接到HTML文件？

回答

相關問題