您的位置：首页 > 其它

简单的小应用-歌曲列表添加(表单输入内容li增加到ul中)

2013-10-18 11:22 363 查看

注意:

1.判断表单字符串是否为空,用"",而不是null,因为是字符串

2.使用变量名时不要加双引号

3.appendChild 将元素添加到父元素的后面

4.createElement 可以创建元素

5.save和load使用了localStorage,后面会有介绍

<!doctype html>

<html lang="en">

<head>

<title>Webville Tunes</title>

<meta charset="utf-8">

<link rel="icon"

type="image/ico"

href="http://wickedlysmart.com/favicon.ico">

<script src="hfhtml5/chapter3/playlist_store.js"></script>

<script>

function handleButtonClick()

{
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
if (songName == "")
{
alert("Please enter something");
}
else
{
var li = document.createElement("li");
li.innerHTML = songName;
var ul = document.getElementById("playlist");
ul.appendChild(li);
save(songName);
}

}

function init()

{
var button = document.getElementById("addButton");
button.onclick = handleButtonClick;
loadPlaylist();

}

window.onload = init;

</script>

<link rel="stylesheet" href="hfhtml5/chapter3/playlist.css">

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航