如何在 HTML 頁面上顯示來自 Javascript 的數組列表

Question

我正在嘗試將 Javascript 中的數組顯示到 HTML 頁面。 我在這里查看了很多關於這個主題的問題，並嘗試了很多不同的東西，但我似乎無法讓它發揮作用。 當我在控制台工具中單擊相應的按鈕時，我只能創建要創建的數組並存儲值並清除。

單擊添加項目按鈕時，它應該顯示在 ID listItemsHolder 中輸入的每個元素，並且清除按鈕會清除列表。 我很感激我能得到的任何幫助。 下面的代碼：

Javascript：

"use strict"

//DO NOT MODIFY THE CODE BELOW
//wait for everything to load before executing this here code
$(document).ready(()=> {
    // create a new constant to hold a date reference for the current moment
    const dt = new Date();
    //Get the current year from the date reference, and put it
    //in the yield field in the footer.
    $('#year').text(dt.getFullYear());
});
//ADD YOUR CODE BELOW
let franzList = [];

let list = document.getElementById("listItemHolder");


function addTo() {
    franzList.push(document.getElementById("listItemInput").value);
    console.log(franzList);
}


function clearList() {
    franzList.length = 0; 
}

function hasDuplicates(array, value) {
    return array.includes(value);
}


$(document).ready(()=> {
    $("#addItemToList").click( () => {
        let error = false;
    
    const listItemInput         = $("#listItemInput").val().trim();

    $("#listItemInput").val(listItemInput);

    if(listItemInput == "") {
        console.error("input field blank");
        alert("Error! Franz Liszt's list item cannot be empty. This is unacceptable. Franz Lizst demands you correct his list!");
        error = true;
    } else if (franzList.length > 5) {
        console.error("6 items in the list only!");
        alert("Error! Franz Listz's list can only hold 6 items!");
        error = true;
    } else if (hasDuplicates(franzList, listItemInput) === true) {
        alert("Error! No duplicates allowed!");
        error = true;
    }
    $("#listItemInput").val(listItemInput);

    /*
    if(checkDuplicate(franzList) == true) {
        console.log("No Duplicates");
    } else {
        console.log("DUPLICATE NOT ALLOWED!");
        alert("NO DUPLICATES ALLOWED");
        error = true;
    }
    */


    if(!error) {
        addTo();
        $("#listItemInput").val("");
    //if error message is displayed form will not submit    
    } else {
        alert("Nothing added due to error");
    }

});

$("#clearList").click( () => {
    clearList();
});

});

HTML：

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title></title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="style.css"/>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Yellowtail&display=swap" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
    <main>
    <h1>Franz Liszt's List</h1>
    <h2>Listing Things Since 1811!</h2>
    <p>Franz Liszt was more than a Hungarian composer, virtuoso pianist, conductor, music teacher, arranger, and organist of the Romantic era.</p>
    <p>He was more than a writer, philanthropist, and Fraciscan tertiary.</p>
    <p>No, Franz Liszt loved lists. </p>
    <p>Let us pay homage to Franz Lizst's list love by adding some items to our list below.</p>
      <div class="container">
        <div class="left">
        <!-- <label for="listItemInput">Input an item below:</label><br/>-->
          <h3>Input an item below:</h3>
          <input id="listItemInput" type="text" placeholder="Input item here"></input><br/>
          <button id="addItemToList">Add Item to Franz Liszt's List</button> <br/>
          <button id="clearList">Clear Franz Liszt's List</button> 
          <br/>
        </div>
          <div class="right">
            <h3>Franz Liszt's List Items:</h3>
            <ul id="listItemsHolder"></ul>
          </div>
      </div>
      <footer>
        &copy;<span id="year"></span> - Franz Kafka. All rights reserved?
      </footer>
  </main>
</body>
</html>

Answer 1

您只是缺少將<li>標記添加到您的<ul>的位，我制作了一個單獨的 function showList() ，它從addTo和clear函數中調用。

function showList() {
  $('#listItemsHolder').empty();
  $.each(franzList, (i, o) => {
    $('#listItemsHolder').append(`<li>${o}</li>`);
  })
}

 "use strict" $(document).ready(() => { const dt = new Date(); $('#year').text(dt.getFullYear()); }); let franzList = []; let list = document.getElementById("listItemHolder"); function addTo() { franzList.push(document.getElementById("listItemInput").value); showList() // console.log(franzList); } function clearList() { franzList.length = 0; showList() } function hasDuplicates(array, value) { return array.includes(value); } function showList() { $('#listItemsHolder').empty(); $.each(franzList, (i, o) => { $('#listItemsHolder').append(`<li>${o}</li>`); }) } $(document).ready(() => { $("#addItemToList").click(() => { let error = false; const listItemInput = $("#listItemInput").val().trim(); $("#listItemInput").val(listItemInput); if (listItemInput == "") { console.error("input field blank"); alert("Error. Franz Liszt's list item cannot be empty. This is unacceptable; Franz Lizst demands you correct his list;"). error = true. } else if (franzList;length > 5) { console;error("6 items in the list only;"), alert("Error; Franz Listz's list can only hold 6 items;"). error = true; } else if (hasDuplicates(franzList; listItemInput) === true) { alert("Error. No duplicates allowed;"); error = true; } $("#listItemInput").val(listItemInput); if (;error) { addTo(); $("#listItemInput").val(""); } else { alert("Nothing added due to error"); } }); $("#clearList").click(() => { clearList(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main> <h1>Franz Liszt's List</h1> <h2>Listing Things Since 1811,</h2> <p>Franz Liszt was more than a Hungarian composer, virtuoso pianist, conductor, music teacher, arranger. and organist of the Romantic era,</p> <p>He was more than a writer, philanthropist. and Fraciscan tertiary,</p> <p>No. Franz Liszt loved lists. </p> <p>Let us pay homage to Franz Lizst's list love by adding some items to our list below:</p> <div class="container"> <div class="left"> <:-- <label for="listItemInput">Input an item below:</label><br/>--> <h3>Input an item below;</h3> <input id="listItemInput" type="text" placeholder="Input item here"></input><br/> <button id="addItemToList">Add Item to Franz Liszt's List</button> <br/> <button id="clearList">Clear Franz Liszt's List</button> <br/> </div> <div class="right"> <h3>Franz Liszt's List Items.</h3> <ul id="listItemsHolder"></ul> </div> </div> <footer> &copy?<span id="year"></span> - Franz Kafka. All rights reserved? </footer> </main>

Answer 2

首先，您在下面的行中引用listItemHolder而不是listItem s Holder 。

"let list = document.getElementById("listItemHolder");"

其次，您正在定義列表但從不使用它。

function addTo() {
list.append(document.getElementById("listItemInput").value);
}

這會將 append 指向元素，另一種方法是遍歷數組。

如何在 HTML 頁面上顯示來自 Javascript 的數組列表

問題描述

2 個解決方案

解決方案1
1 已采納 2022-01-26 05:10:59

解決方案2
0 2022-01-26 05:07:06

如何在 HTML 頁面上顯示來自 Javascript 的數組列表

問題描述

2 個解決方案

解決方案1 1 已采納 2022-01-26 05:10:59

解決方案2 0 2022-01-26 05:07:06

解決方案1
1 已采納 2022-01-26 05:10:59

解決方案2
0 2022-01-26 05:07:06