How to display array list from Javascript on HTML page

Question

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:

 
    
    
      
      
      
      
      
      
      
      
    
    
    
    Franz Liszt's List
    Listing Things Since 1811!
    Franz Liszt was more than a Hungarian composer, virtuoso pianist, conductor, music teacher, arranger, and organist of the Romantic era.
    He was more than a writer, philanthropist, and Fraciscan tertiary.
    No, Franz Liszt loved lists. 
    Let us pay homage to Franz Lizst's list love by adding some items to our list below.
      
        
        
          Input an item below:
          

           

           
          

        
          
            Franz Liszt's List Items:
            
          
      
      
        © - Franz Kafka. All rights reserved?

Kinglish · Accepted Answer

You're just missing the bit that adds the

tags to your

showList()

addTo

clear

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

"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(`${o}`);
  })
}

$(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();
  });
});



  Franz Liszt's List
  Listing Things Since 1811!
  Franz Liszt was more than a Hungarian composer, virtuoso pianist, conductor, music teacher, arranger, and organist of the Romantic era.
  He was more than a writer, philanthropist, and Fraciscan tertiary.
  No, Franz Liszt loved lists. 
  Let us pay homage to Franz Lizst's list love by adding some items to our list below.
  
    
      
      Input an item below:
      

       

      
      

    
    
      Franz Liszt's List Items:
      
    
  
  
    © - Franz Kafka. All rights reserved?

How to display array list from Javascript on HTML page

Answers (2)

Related Questions