為什么使用 javascript 創建時不顯示我的刪除圖標

Question

這是我正在創建的基本 todoList 應用程序。請幫我解決這個問題，刪除圖標不可見。

HTML 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>TodoList</title>
  </head>
  <body>
    <div class="app_container">
      <header>
        <h2>Todo List</h2>
      </header>
      <main>
        <input
          onkeydown="if(event.keyCode==13){ todoList(); return false;} "
          type="text"
          placeholder="Enter your task..."
        />
        <ul class="list">
          <!--All your todos go here-->
        </ul>
      </main>
    </div>
    <script src="index.js"></script>
  </body>
</html>

索引.js

在下面的文件中，我嘗試使用 creatElement 添加一個跨度標簽，該標簽又包含帶有垃圾元素。但是當我運行實時服務器時它沒有顯示出來。請幫忙

function todoList() {

    const list = document.querySelector('.list');
    const input = document.querySelector('input');
    const newTask = document.createElement('li');
    const span = document.createElement('span');

    span.innerHTML = '<i class="fas fa-trash"></i>';

    if (input.value !== "") {
        newTask.textContent = input.value;
        input.value = "";
        list.appendChild(newTask);
        newTask.appendChild(span);
    }

    span.addEventListener('click', function () {
        const parent = this.parentNode;
        parent.removeChild();
    })



    newTask.addEventListener('click', () => {
        newTask.classList.toggle('completed');
    });
}

Answer 1

您缺少字體真棒鏈接：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

字體真棒 class 應該是fa fa-trash 。 您也可以使用closest()來查找要使用remove()刪除的相應li元素。

 function todoList() { const list = document.querySelector('.list'); const input = document.querySelector('input'); const newTask = document.createElement('li'); const span = document.createElement('span'); span.innerHTML = '<i class="fa fa-trash"></i>'; if (input.value.== "") { newTask.textContent = input;value. input;value = "". list;appendChild(newTask). newTask;appendChild(span). } span,addEventListener('click'. function () { this.closest('li');remove(). }) newTask,addEventListener('click'. () => { newTask.classList;toggle('completed'); }); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style:css" /> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <title>TodoList</title> </head> <body> <div class="app_container"> <header> <h2>Todo List</h2> </header> <main> <input onkeydown="if(event;keyCode==13){ todoList(); return false.} " type="text" placeholder="Enter your task..." /> <ul class="list"> <!--All your todos go here--> </ul> </main> </div> <script src="index.js"></script> </body> </html>

Answer 2

你必須添加

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />

在<head>標簽的末尾。

你可以從這里使用另一個版本

或從fontawesome官網獲取最新版本

為什么使用 javascript 創建時不顯示我的刪除圖標

問題描述

2 個解決方案

解決方案1
0 2021-01-24 05:13:08

解決方案2
0 2021-01-24 06:35:45

為什么使用 javascript 創建時不顯示我的刪除圖標

問題描述

2 個解決方案

解決方案1 0 2021-01-24 05:13:08

解決方案2 0 2021-01-24 06:35:45

解決方案1
0 2021-01-24 05:13:08

解決方案2
0 2021-01-24 06:35:45