Karan
62 lines
1.8 KiB
Plaintext
62 lines
1.8 KiB
Plaintext
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head> <title>Complete JavaScript Course</title>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="message">Complete JavaScript Course</div>
|
||
<div>
|
||
<input type="text" id="addFriend">
|
||
<input type="button" id="addNew" value="Add Friend">
|
||
</div>
|
||
<table id="output"></table>
|
||
<script>
|
||
window.onload = build;
|
||
const myArray = ["Laurence", "Mike", "John", "Larry"];
|
||
const message = document.getElementById('message');
|
||
const addNew = document.getElementById('addNew');
|
||
const newInput = document.getElementById('addFriend');
|
||
const output = document.getElementById('output');
|
||
|
||
addNew.onclick = function () {
|
||
const newFriend = newInput.value;
|
||
adder(newFriend, myArray.length, 0);
|
||
myArray.push(newFriend);
|
||
}
|
||
|
||
function build() {
|
||
myArray.forEach((item, index) => {
|
||
adder(item, index, 0)
|
||
})
|
||
}
|
||
|
||
function adder(name, index, counter) {
|
||
const tr = document.createElement('tr');
|
||
const td1 = document.createElement('td');
|
||
td1.classList.add('box');
|
||
td1.textContent = index + 1;
|
||
const td2 = document.createElement('td');
|
||
td2.textContent = name;
|
||
const td3 = document.createElement('td');
|
||
td3.textContent = counter;
|
||
tr.append(td1);
|
||
tr.append(td2);
|
||
tr.append(td3);
|
||
tr.addEventListener('click', (e) => {
|
||
console.log(tr.lastChild);
|
||
let val = Number(tr.lastChild.textContent);
|
||
val++;
|
||
tr.lastChild.textContent = val;
|
||
})
|
||
output.appendChild(tr);
|
||
}
|
||
|
||
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|