На самом деле, я пытаюсь сделать кнопку обновления, после того, как я нажму на нее, должен отобразить данные строки в поле ввода, а затем я отредактирую входные данные, после чего я нажму кнопку подтверждения и окончательный результат. должна быть строка с обновленной информацией, которую я добавил.
<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">
</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">
</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">
<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>
//Javascript
var bookMname = document.getElementById("siteName");
var bookUrl = document.getElementById("siteUrl");
var btn = document.getElementById("sub");
var bookMarks;
if (localStorage.getItem("BookStorage") == null) {
bookMarks = [];
}
else {
bookMarks = JSON.parse(localStorage.getItem("BookStorage"));
displayData();
}
btn.onclick = function () {
addBookMark();
displayData();
reset();
}
function addBookMark() {
if (bookMname.value != "" && bookUrl.value != "") {
var bookMark = {
bookMarkName: bookMname.value,
url: bookUrl.value,
}
bookMarks.push(bookMark);
localStorage.setItem("BookStorage", JSON.stringify(bookMarks))
}
else {
alert("Please fill the empty fields");
}
}
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>" + '<a class="btn btn-danger mr-4" href="#" onclick="handleDelete(' + i + ');">Delete</a> ' + "</span> <span>" + '<a class="btn btn-info mr-4" href="#" onclick="Update()">Update</a> ' + "</span></div>"
}
document.getElementById("bookmarkCon").innerHTML = data;
}
function reset() {
document.getElementById("myForm").reset();
}
function handleDelete(index) {
bookMarks.splice(index, 1);
localStorage.setItem("BookStorage", JSON.stringify(bookMarks));
displayData();
}
// update button
function Update() {
for (var i = 0; i < bookMarks.length; i++) {
}
}
Ваша помощь очень ценится, если это возможно сделать простым способом, так как я начинающий в java сценарии. спасибо заранее