0

I have a function that returns a javascript array which has been passed from local storage to a html ordered list tag. the function runs on document load and works ok. The thing is I want to be able to update the list. The array in local storage updates ok but I cant get the list to dynamically append or update. The best way I can think of achieving this is by removing the original list and then recalling the scoresListDisplay() method after updating local storage. But various attempts at removeChild do not work or if they do work the method will not recall.

Global variables:

var currentScore = 0;
var storedEntries = [];
var highScoreList;
var gamescorelist;

The Function:

function scoresListDisplay(){
 storedEntries = JSON.parse(localStorage.getItem("localstoragekey"));
  highScoreList = game.querySelector("section#game ol.high-scores");      
      for(var i = 0; i < 10; i++){
      var s = storedEntries[i];                        
      gamescorelist = document.createElement('li');
      gamescorelist.innerHTML = (typeof(s) != "undefined" ? s : "" );  
      highScoreList.appendChild(gamescorelist); 
      }

The method call after local storage has been updated:

highScoreList.removeChild(gamescorelist); 
scoresListDisplay();

also tried:

highScoreList.removeChild(document.getElementById("game"));     
gamescorelist.remove();

I was expecting the remove child method to work but it does not. If anyone has any help on this I would greatly appreciate it.

Ger
  • 49
  • 4
  • possible duplicate of [Remove all child elements of a DOM node in JavaScript?](http://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript) – Ram Mar 08 '14 at 21:24
  • you want highScoreList.innerHTML=""; ... – dandavis Mar 09 '14 at 01:10

0 Answers0