Cannot set properties of null (setting 'value')

    <div class="modal-body form-wrap">
            <!-- 编辑表单 -->
            <form class="edit-form">
              <input type="hidden" class="id" name="id" />
              <div class="mb-3">
                <label for="bookname" class="form-label">书名</label>
                <input
                  type="text"
                  class="form-control bookname"
                  placeholder="请输入书籍名称"
                  name="bookname"
                />
              </div>
              <div class="mb-3">
                <label for="author" class="form-label">作者</label>
                <input
                  type="text"
                  class="form-control author"
                  placeholder="请输入作者名称"
                  name="author"
                />
              </div>
              <div class="mb-3">
                <label for="publisher" class="form-label">出版社</label>
                <input
                  type="text"
                  class="form-control publisher"
                  placeholder="请输入出版社名称"
                  name="publisher"
                />
              </div>
            </form>
          </div>


``````javascript
const editModal = document.querySelector(".edit-modal");
const nameEdit = new bootstrap.Modal(editModal);
document.querySelector(".list").addEventListener("click", (e) => {
  if (e.target.classList.contains("edit")) {
    // nameEdit.show();
    const theid = e.target.parentNode.dataset.id;
    axios({
      url: `http://hmajax.itheima.net/api/books/${theid}`,
    }).then((result) => {
      console.log(result.data.data);
      const bookObj = result.data.data;
      // console.log(daTa[author]);

      // console.log(Object.keys(bookObj));
      // const keys = Object.keys(bookObj);
      // keys.forEach((key) => {
      //   console.log(bookObj[key]);
      //   document.querySelector(`.edit-form.${key}`).value = bookObj[key];
      // });
      document.querySelector(".edit-form.id").value = 

bookObj.id;
      document.querySelector(".edit-form.bookname").value = bookObj.bookname;
      document.querySelector(".edit-form.author").value = bookObj.author;
      document.querySelector(".edit-form.publisher").value = bookObj.publisher;
    });
    nameEdit.show();
  }
});

少了空格吧document.querySelector(".edit-form .id").value = bookObj.id

• 以下回答由chatgpt基于相关博客总结生成:

  解决这个错误的方法通常有两种途径。下面我将介绍这两种方法以及如何实施它们：

  1. 检查要设置值的元素是否存在： 错误信息中提到的“Cannot set properties of null (setting 'value')”通常表示你正在尝试给一个值为null的元素设置属性。因此，首先需要检查相应元素是否存在。你可以通过使用getElementById或其他选择器方法来获取元素，并确保它不为空。

  示例代码如下： javascript var element = document.getElementById('exampleElement'); if (element) { element.value = 'example value'; } else { console.error('Element not found!'); }

  在上面的示例中，我们首先通过getElementById方法获取一个元素，并将其赋值给element变量。接着，我们使用一个条件语句来检查该元素是否存在。如果元素存在，我们就可以安全地给它设置值。否则，我们会打印出一条错误信息。

  1. 确保在操作元素之前，DOM已经完全加载： 另一种常见的原因是在DOM没有完全加载之前就尝试操作元素。这会导致元素尚未被正确识别，从而出现错误。为了解决这个问题，你可以将你的JavaScript代码放在DOMContentLoaded事件的回调函数中。这样，当DOM加载完成时，你的代码就会被触发执行。

  示例代码如下： javascript document.addEventListener('DOMContentLoaded', function() { var element = document.getElementById('exampleElement'); if (element) { element.value = 'example value'; } else { console.error('Element not found!'); } });

  在上面的示例中，我们使用addEventListener方法来在DOMContentLoaded事件上注册一个回调函数。在回调函数中，我们执行类似于第一种方法的操作，确保在DOM加载完成后再操作元素。

  如果以上两种方法都未能解决你的问题，可能是由于其他原因导致的。这时可能需要进一步诊断代码和错误信息以找到根本原因。