Currently, I have created a form that allows users to input the website name and URL. Upon clicking the submit button, the output displays the website name along with two buttons:
1. one for visiting the site
2. another for removing the bookmark using onClick
However, I am facing an issue where the remove button does not function as intended:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSBOOKMARK</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/all.css">
<link rel="stylesheet" href="css/index_style.css" />
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container pt-5 pb-5">
<h1 class="pb-5 pl-3 font-weight-bold">BookMark</h1>
<hr>
<div class="body m-auto text-center py-5">
<h2 class="py-2">Bookmark your favorite sites</h2>
<form class="w-75 m-auto" id="myForm">
<div class="form-group">
<label for="Site_Name" class="py-2">Site Name</label>
<input type="text" class="form-control" id="siteName" placeholder="Bookmark Name" required>
</div>
<div class="form-group">
<label for="Site_URL" class="py-2">Site URL</label>
<input type="text" class="form-control" id="siteUrl" placeholder="website URL" required>
</div>
<button id="sub" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="container mt-3">
<div class="row shadow-none p-3 mb-5 bg-light rounded">
<!--dispalyarea-->
<div class="col">
<div id="bookmarkCon"></div>
</div>
</div>
</div>
<hr>
<div class="footer">
<p>©2019 Bookmarker Inc.</p>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
//Java script code :
var bookMname = document.getElementById("siteName");
var bookUrl = document.getElementById("siteUrl");
var btn = document.getElementById("sub");
var bookMarks = [];
btn.onclick = function () {
addBookMark();
displayData();
reset();
}
function addBookMark() {
var bookMark = {
bookMarkName: bookMname.value,
url: bookUrl.value,
}
bookMarks.push(bookMark);
}
function displayData() {
/**local var */
var data = "";
for (var i = 0; i < bookMarks.length; i++) {
data += "<div><span class='mr-5 font-weight-bold h1 text-uppercase'>" + bookMarks[i].bookMarkName + " " + "</span><span>" + ' <a class="btn btn-primary mr-4" target="_blank" href="' + bookMarks[i].url + '">Visit</a> ' + "</span></div>"
}
document.getElementById("bookmarkCon").innerHTML = data;
}
function displayData() {
/**local var */
var data = "";
for (var i = 0; i < bookMarks.length; i++) {
data += "<div><span class='mr-5 font-weight-bold h1 text-uppercase'>" + bookMarks[i].bookMarkName + " " + "</span><span>" + ' <a class="btn btn-primary mr-4" target="_blank" href="' + bookMarks[i].url + '">Visit</a> ' + "</span><span onclick='dD()'>" + ' <a class="btn btn-danger mr-4" href="' + bookMarks[i].url + '">Delete</a> ' + "</span></div>"
}
document.getElementById("bookmarkCon").innerHTML = data;
}
function reset() {
document.getElementById("myForm").reset();
}
//Delete function
function dD() {
for (var i = 0; i < bookMarks.length; i++) {
if (bookMarks[i].url == bookMarks.url) {
// Remove from array
bookMarks.splice(i, 1);
}
}
}
console.log()
Upon trying to use the delete button, I face redirection to an error page. How can I resolve this issue with the delete functionality?