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

最新推荐文章于 2019-11-28 10:16:03 发布

andrewleeeeee

最新推荐文章于 2019-11-28 10:16:03 发布

阅读量442

点赞数

分类专栏： Javascript JS成品代码

本文链接：https://blog.csdn.net/andrewleeeeee/article/details/12850513

版权

Javascript 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JS成品代码

17 篇文章 0 订阅

订阅专栏

注意:

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>