-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
81 lines (75 loc) · 2.25 KB
/
script.js
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// Form Variables
var songInput = document.getElementById("songName");
var artistInput = document.getElementById("songArtist");
var setListNum = document.getElementById("setListNum");
var button = document.querySelector(".btn");
// Table Set List Target Variables
var setListOne = document.getElementById("targetListOne");
var setListTwo = document.getElementById("targetListTwo");
var setListThree = document.getElementById("targetListThree");
var setListFour = document.getElementById("targetListFour");
// Event Listener to add Songs to Set Lists
button.addEventListener('click', addSong, true);
// Add Song Function
function addSong(e) {
if (songInput.value === '' || artistInput.value === '') {
errMessage();
}
else {
addSongtoList();
}
clearForm();
e.preventDefault();
};
// Error Message if input field is empty
function errMessage() {
var errorMsg = document.getElementById("errorMsg");
errorMsg.innerHTML = "Please Add Song and Artist";
setTimeout(function () { errorMsg.innerHTML = ""; }, 2000);
};
// Create Table Row & Data
function addSongtoList() {
var row = document.createElement('tr');
var col1 = document.createElement('td');
var col2 = document.createElement('td');
var col3 = document.createElement('td');
// Create Remove Button
var btnRemove = document.createElement('button');
btnRemove.classList.add('btn');
btnRemove.classList.add('btn-danger');
btnRemove.classList.add('text-white');
// Create Text Nodes
var song = document.createTextNode(songInput.value);
var artist = document.createTextNode(artistInput.value);
var X = document.createTextNode("X");
// Append Children
btnRemove.appendChild(X);
col1.appendChild(song);
col2.appendChild(artist);
col3.appendChild(btnRemove);
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
// Choose Table to Add Data
var list = setListNum.value;
switch (list) {
case "1":
setListOne.appendChild(row);
break;
case "2":
setListTwo.appendChild(row);
break;
case "3":
setListThree.appendChild(row);
break;
case "4":
setListFour.appendChild(row);
break;
};
};
// Clear Input Fields
function clearForm() {
songInput.value = '';
artistInput.value = '';
setListNum.value = '1';
};