HTML-JavaScript-顯示空值的標記元素-有解無憂

為什么我的let list = document.querySelector('.list')串列變數顯示為null實際上有一個類屬性為的 ul 標記list？

***ToDoApp/script.js***
let list = document.querySelector('.list')
console.log(list)
const CHECK = {status:'completed', icon:'bx bxs-check-circle'};
const UNCHECK = {status:'not-completed', icon:'bx bx-circle'}
let id = 0;

let itemsList = []

***data-include-html.min.js file***
$(function(){
  $("*[data-include-html]").each(function(){
    var t = $(this).attr("data-include-html"),
        u = this.id;
        jQuery.ajax({
          url: t,
          success: function(t){
            $("#"   u).html(t)
          },
          error: function(n, c, i){
            var s = n.status   ": "   n.statusText;
            $("#"   u).html(t   "-"   s)
          }
        })
  })
});

***MAIN HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>To Do</title>
  <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="./ToDoApp/style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>

<div data-include-html="./ToDoApp/index.html" id="todo-app"></div>
</div>
  <script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="module" src="script.js"></script>
    <script src="include-html.min.js"></script>
        <script src="./ToDoApp/script.js"></script>
  </body>
</html>

***To Do HTM File***

    <div class="container" id="todo-app">
      <div class="header">
        <div class="clear">
          <i class="bx bx-refresh"></i>
        </div>
        <div id="date"></div>
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
          
          </ul>
        </div>
        <div class="add-item">
            <i class="bx bxs-plus-circle"></i>
            <input type="text" id="input" placeholder="Add a to-do">
        </div>

      </div>

    </div>

uj5u.com熱心網友回復：

首先，我將.querySelector調整為目標#list而不是.list。這將針對單個串列元素而不是查找多個元素。

let list = document.querySelector('#list')

當我運行代碼片段時，這是我的控制臺的輸出：

 <ul class="list" id="list">
          
 </ul>

如果您的控制臺顯示為 null，這可能是因為“#list”父元素內沒有元素。

uj5u.com熱心網友回復：

您script.js正在加載 before index.html，因此在腳本運行時尚不.list存在任何元素。

您可以通過在index.html而不是main.html.

<div class="container" id="todo-app">
  <div class="header">
     ...
  </div>
</div>
<script src="script.js"></script>

或者添加另一個屬性，如data-include-html-callback，并在中使用它include-html.js來呼叫函式script.js

$(function(){
  $("*[data-include-html]").each(function(){
    var t = $(this).attr("data-include-html"),
        c = $(this).attr("data-include-html-callback"),
        u = this.id;
        jQuery.ajax({
          url: t,
          success: function(t){
            $("#"   u).html(t);
            if (typeof window[c] == 'function') window[c]();
          },
          error: function(n, c, i){
            var s = n.status   ": "   n.statusText;
            $("#"   u).html(t   "-"   s);
          }
        })
  })
});

function onTodoLoad(){
    let list = document.querySelector('.list')
    console.log("list:"   list);
    const CHECK = {status:'completed', icon:'bx bxs-check-circle'};
    const UNCHECK = {status:'not-completed', icon:'bx bx-circle'}
    let id = 0;
    let itemsList = []
}

  <div data-include-html="index.html" data-include-html-callback="onTodoLoad" id="todo-app"></div>

我沒有真正測驗過這些解決方案中的任何一個，因此您可能需要調整它們。

編輯：第二個解決方案對我來說很好。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/358976.html

標籤：javascript html

上一篇：React：為什么我的組件在由陣列狀態控制時不會重新渲染？

下一篇：當嘗試使用mousemoveeventListener在函式內顯示滑鼠坐標時，MouseEvent.clientX/Y回傳NaN