how to create a button javascript that creates a new form field group when the user presses it code example
Example: using javascript when i ' m iterate localstorage current input value my DOM its Add multiple value or perivous value of localstorage ?
class Display {
add = () =>{
let w = localStorage.getItem('localkey');
if (w == null){
localObj = [] ;
}else{
localObj = JSON.parse(w);
}
let data ;
localObj.forEach((element) => {
data = `<tr>
<td>${element.lname}</td>
<td>${element.lauthor}</td>
<td>${element.ltype}</td>
</tr>`
});
let tablebody = document.getElementById('tablebody');
if (localObj.length > 0 ){
tablebody.innerHTML += data;
} else{
tablebody.innerHTML = `There Is No Book Added Please Add`;
}
}
clear = () => {
let myform = document.getElementById('libraryForm');
myform.reset();
}
}
let addBook = document.getElementById('addme');
addBook.addEventListener('click', (e) => {
let name = document.getElementById('bookName').value;
let author = document.getElementById('author').value;
let type = '';
if(fiction.checked){
type = fiction.value;
}
else if(programing.checked){
type = programing.value;
}
else if(cooking.checked){
type = cooking.value;
}
let w = localStorage.getItem('localkey');
if (w == null){
localObj = [];
}else{
localObj = JSON.parse(w);
}
let mylocal = {
lname:name,
lauthor:author,
ltype:type
}
console.log(mylocal.lname);
localObj.push(mylocal)
localStorage.setItem('localkey' , JSON.stringify(localObj));
let bookdisplay = new Display();
bookdisplay.add();
bookdisplay.clear();
e.preventDefault();
});
function codeAddress() {
add = () =>{
let w = JSON.parse(localStorage.getItem('localkey'));
w.forEach((element)=>{
let tablebody = document.getElementById('tablebody');
let data = `<tr>
<td>${element.lname}</td>
<td>${element.lauthor}</td>
<td>${element.ltype}</td>
</tr>`
tablebody.innerHTML += data;
});
}
add();
}
window.onload = codeAddress;