Breaking News: Grepper is joining You.com. Read the official announcement!

using javascript when i ' m iterate localstorage current input value my DOM its Add multiple value or perivous value of localstorage ?

Clean Coyote answered on April 29, 2020 Popularity 3/10 Helpfulness 7/10

answer using javascript when i ' m iterate localstorage current input value my DOM its Add multiple value or perivous value of localstorage ?

using javascript when i ' m iterate localstorage current input value my DOM its Add multiple value or perivous value of localstorage ?

Comment

//featch data from form
// class Book{
//     constructor(givenNAme , givenAuthor , givenType){
//         this.name = givenNAme;
//         this.author = givenAuthor;
//         this.type = givenType;
//     }
// }

// display function 

class Display {
    
    // add to UI
        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 form
    clear = () => {
        let myform  = document.getElementById('libraryForm');
        myform.reset();
    
    }


}



let addBook = document.getElementById('addme');

// create black array 


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 myBook = new Book(name, author, type);
    // console.log(myBook);
    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;

Popularity 3/10 Helpfulness 7/10 Language javascript

Source: Grepper

Tags: add dom input iterate javascript local-storage m multiple-value using value-of when

Link to this answer
Share Copy Link

Contributed on Apr 29 2020

Clean Coyote

0 Answers Avg Quality 2/10

using javascript when i ' m iterate localstorage current input value my DOM its Add multiple value or perivous value of localstorage ?

Contents

More Related Answers

using javascript when i ' m iterate localstorage current input value my DOM its Add multiple value or perivous value of localstorage ?

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.