How to display array list from Javascript on HTML page-CodePudding

I am trying to display the array in Javascript to the HTML page. I've looked through a lot of questions on here about this topic and tried quite a few different things but I can't seem to get it work. I can only get the array to be created and store the values and clear when I click the appropriate button when looking in the console tool.

When the add item button is clicked it should show each element entered on the ID listItemsHolder and the clear button clears the list. I appreciate any help I can get. Code below:

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 >
        <div >
        <!-- <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 >
            <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>

CodePudding user response：

You're just missing the bit that adds the <li> tags to your <ul> I made a separate function showList() that is called from both the addTo and clear functions.

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 >
    <div >
      <!-- <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 >
      <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>

CodePudding user response：

First you are referencing listItemHolder and not listItemsHolder on the line below.

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

Second you are defining the list but never using it.

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

This will append to the element another method would be to loop over the array.