Working with delete button in javascript

Working with delete button in javascript
0

#1

Just trying out these using a video tutorial but the delete function isn’t working.I’v checked this more than 10 times and still can’t find the error,please I need your help

HTML FILE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
   <link rel="icon" href="favicon.ico">

    <title>Website Bookmaker</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Space out content a bit */
body {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-right: 15px;
  padding-left: 15px;
}

/* Custom page header */
.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

/* Customize container */
@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}
.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}
    </style>
  </head>

  <body onload="fetchBookmarks()">

    <div class="container">
      <div class="header clearfix">
        <nav>
        </nav>
        <h3 class="text-muted">Bookmark App</h3>
      </div>

      <div class="jumbotron">
        <h2>Tunjiy's Bookmarker</h2>
        <form id="myForm">
            <div class="form-group">
                <label>Website Name</label>
                <input type="test" class="form-control" id="sitename" placeholder="Enter sitename">
            </div>
            <div class="form-group">
                    <label>Website URL</label>
                    <input type="test" class="form-control" id="siteurl" placeholder="Enter siteURL">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>

       </form>
     </div>

      <div class="row marketing">
        <div class="col-lg-12">
         <div id="results"></div>
        </div>
      </div>

      <footer class="footer">
        <p>&copy; 2018 Bookmarker Inc.</p>
      </footer>

    </div> <!-- /container -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
   <script src="js\bootstrap.min.js"></script>
   <script src="js\main.js"></script>
  </body>
</html>

JSCRIPT FILE

document.getElementById("myForm").addEventListener("submit",storeBookmark);
//save bookmark
function storeBookmark(e){
    //get form values
    var siteName=document.getElementById("sitename").value;
    var siteUrl=document.getElementById("siteurl").value;
    

    var bookmark=
    {
        name:siteName,
        url:siteUrl
    }
    console.log(bookmark);
   /* //local storage Test
    localStorage.setItem("test","Hello world");
    console.log(localStorage.getItem("test"));
    localStorage.removeItem("test");
    console.log(localStorage.getItem("test"));
   
    */
   //Test if bokmarks is null
   if (localStorage.getItem("bookmarks")===null)
   {
       //array initialization
       var bookmarks=[];
       //add to array
       bookmarks.push(bookmark);
       //set to local storage
       localStorage.setItem("bookmarks",JSON.stringify(bookmarks));
   }else
   {
       //get bookmarks from local storage
       var bookmarks=JSON.parse(localStorage.getItem("bookmarks"));
       //add bookmark to array
       bookmarks.push(bookmark);
       //reset to local storage
       localStorage.setItem("bookmarks",JSON.stringify(bookmarks)); 
   }


   //refetch bookmark
   fetchBookmarks();
   
   //prevent form from submitting
   e.preventDefault();
}

function deletBookmark(url)
{
    //console.log(url);
     // get bookmarks from localstorage
 var bookmarks=JSON.parse(localStorage.getItem("bookmarks"));
 for (var i=0; i < bookmarks.length; i++)
 {
     if(bookmarks[i].url == url)
     {
         //remove from array
         bookmarks.splice(i, 1);
     }
 }
 //reset back to local storage
 localStorage.setItem("bookmarks",JSON.stringify(bookmarks)); 

  //refetch bookmarks,continue from here
  fetchBookmarks();
 }

   //fetch bookmarks
   function fetchBookmarks()
   {
    var bookmarks=JSON.parse(localStorage.getItem("bookmarks")); 
    //console.log(bookmarks);
    //get output id
    var results=document.getElementById("results");

    //build output

    results.innerHTML="";

   
    for(var i = 0; i < bookmarks.length; i++)
    {
        var name= bookmarks[i].name;
        var url= bookmarks[i].url;

        results.innerHTML+="<div class='well'>"+
                           "<h3>"+name+
                           "<a class='btn btn-default' target='_blank' href='"+url+"'>Visit</a>  "+
                           "<a onClick='deletBookmark(\" "+url+"\")' class='btn btn-danger'  href='#'>Delete</a>" +
                           "<h3>" +
                           "</div>";
    }
   
   }

#2

It would be easier if you had this code on a codepen or glitch.


#3

Mistake on JS line 90. You add an extra space to the start of the URL.

 "<a onClick='deletBookmark(\" "+url+"\")' class='btn btn-danger'  href='#'>Delete</a>" +

See: https://codepen.io/JohnnyBizzel/pen/BOzrPe


#4

thanks,so funny I didn’t notice this.Thanks once again


#5

Thanks for introducing me to codepen too.I think I’m loving this


#6

You’re using

where parameter of function is url, but above you have element with name siteUrl.


#7

I think the main error is this “Delete” + because it’s now working fine.Thanks


#8

hi,I tried opening a codepen account but my bootstrap isn’t effective on it.What do u think is the reason


#9

You need to add bootstrap in the pen’s settings.