时间戳

首页 > 解决方案 > localStorage 更新无法找到 innerHTML 值 - Javascript/jQuery

javascript - localStorage 更新无法找到 innerHTML 值 - Javascript/jQuery

问题描述

我一直在重构innerHTML表单中的一些内容以使其更具可读性。以前，我有一个innerHTML难以阅读的肿块，但可以工作并允许更新到localStorage.

我为每个 div 包装器提供了自己唯一的 ID，以便我可以更改innerHTML值，以使所有内容更整洁和可读，这工作正常，但是当我现在尝试编辑我的表单时，它给了我一个cannot set property 'fname' of undefined. 当我将其恢复为块 html 时，它可以正常编辑吗？

我对 JS 如何工作的了解有限，所以任何人都可以解释为什么会发生这种情况，并且有解决方案吗？

这是我的代码和编辑处理程序（简化），由于它使用 localStorage 很难在此显示，但希望它至少有帮助：

$(document).on('change keyup', '.required', function(e) {
  var disabled = true;

  $(".required").each(function() {
    var value = this.value;
    if (!(value) || (value.trim() === '') || ($(this).hasClass('is-invalid'))) {
      disabled = false;
      $('.toggle-disabled').prop("disabled", true);
    }
  });

  if (disabled) {
    $('.toggle-disabled').prop("disabled", false);
  }

});

var bookings = JSON.parse(localStorage.getItem("bookings")) || [];

$("#submit").click(function() {

  var newBookings = {
    id: new Date().getTime(),
    fname: $('#fname').val(),
    lname: $('#lname').val(),
  }

  bookings.push(newBookings);
  var json = JSON.stringify(bookings);
  window.localStorage.setItem("bookings", json);

  showBooking();
  document.getElementById('formSuccess').style.display = "block";

});

$(document).on('click', '#edit', function(e) {
  e.preventDefault();

  var parent_form = $('this.form');

  var fname = parent_form.find('.fname').val();
  var lname = parent_form.find('.lname').val();

  let i = bookings.findIndex(booking => booking.id == $(this).data("id"));

  bookings[i].fname = fname;
  bookings[i].lname = lname;

  var json = JSON.stringify(bookings);
  window.localStorage.setItem("bookings", json);

  alert('Form updated!');
  window.location.reload();
  showBooking();

});

function showBooking() {
  var bookingResult = document.getElementById("result");
  var ul = document.createElement("ul");
  bookingResult.innerHTML = `<h3 class="text-center">Your Bookings</h3>`;
  for (let i = 0; i < bookings.length; i++) {
    bookingResult.innerHTML += `
<div class="card card-body bg-light  m-4"> 
<div class="row">
<p>Owner name: ${bookings[i].fname + " " + bookings[i].lname}</p>
</div>
<div class="row">
<div class="d-grid gap-2 d-md-block">
<button onclick="editBooking(${i})" class="col-md-4 btn btn-outline-danger ">Edit</button>
<button onclick="deleteBooking(${i})" class="col-md-4 btn btn-danger text-light ">Delete</button>
</div>
</div>                          
</div>`;
  }
}

function editBooking(i) {
  $('#result').hide();
  var fnameEdit = document.getElementById("fnameEdit");
  var lnameEdit = document.getElementById("lnameEdit");

  var editButton = document.getElementById("editBtn");

  fnameEdit.innerHTML = `<input type="text" class="fname form-control required" data-id="${bookings[i].id}" placeholder="First Name" name="${bookings[i].fname}" value="${bookings[i].fname}" required>`;

  lnameEdit.innerHTML = `
<input type="text" class="lname form-control required" data-id="${bookings[i].id}" placeholder="Last Name" name="${bookings[i].lname}" value="${bookings[i].lname}" required>`;

  editButton.innerHTML = `<div class="d-grid gap-2 d-md-block">
<input id="edit" class="btn btn-danger toggle-disabled" type="submit" value="Edit">
<a href="index.html" type="button" class="btn btn-outline-danger ">Cancel</a>
</div>`;

}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<form id="regForm" name="regForm" action="" class="col-md-6">
  <div class="row">
    <div id="fnameEdit" class="col-md-6">
      <input type="text" class="input form-control required" id="fname" placeholder="First Name" name="fname" required>
    </div>
    <div id="lnameEdit" class="col-md-6">
      <input type="text" class="input form-control required" id="lname" placeholder="Last Name" name="lname" required>
    </div>
  </div>

  <div id="editBtn">
    <div class="col-md-6">
      <input id="submit" class="btn btn-danger toggle-disabled" type="submit" value="Submit">
    </div>
  </div>
</form>
<div class="col-md-6">
  <div id="result" class="row"></div>
  <div id="currentItem" class="row"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

标签： javascriptjquerydominnerhtml

解决方案

我最终解决了这个问题，我没有给属性一个新的 ID，不知何故，这对问题进行了排序。我删除了 innerHTML 并用工作正常的 setAttribute 方法替换。

感谢帮助！

这些方面的东西：

    var fname = document.getElementById("fname");
    var lname = document.getElementById("lname");
    var editButton = document.getElementById("editBtn");

    fname.setAttribute('data-id', bookings[i].id);
    fname.setAttribute('value', bookings[i].fname);
    lname.setAttribute('data-id', bookings[i].id);
    lname.setAttribute('value', bookings[i].lname);

    editButton.innerHTML = `<div class="d-grid gap-2 d-md-block">
<input data-id="${bookings[i].id}" id="edit" class="btn btn-danger toggle-disabled" type="submit" value="Edit" disabled>
<a href="index.html" type="button" class="btn btn-outline-danger ">Cancel</a>
</div>`;

推荐阅读