Dom/exercise7.html at main · farahmango/Dom · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercise #7: Simple playlist</title>
    <link rel="stylesheet" href="exercise7.css">
    <script>
        /* TODO this is for you to complete */
    </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>
<script>
   function handleButtonClick() {
            var textInput = document.getElementById("songTextInput");
            var songName = textInput.value;

            if (songName == "") {
                alert("Please enter a song");
            }
            else {
                var li = document.createElement("li");
                li.innerHTML = songName;
                var ul = document.getElementById("playlist");
                // del is an image
                var del = document.createElement("button");
                del.innerHTML="delete";
                // del.src = "images/delete.png";
                del.className = "delete";
                del.onclick = delSong;
                li.appendChild(del);
                ul.appendChild(li);
            }
        }

        function delSong() {
            // find the parent (li) element
            var song = this.parentNode;
            // delete the song (li) from the list (ul)
            song.parentNode.removeChild(song);
        }

        window.onload = function () {
            document.getElementById("addButton").onclick = handleButtonClick;

        }


</script>
</body>
</html>