Question 217538 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Appending to Div, Saving Date and Score to localStorage? (JS only)

I am trying to figure out how to get localStorage to work here. I am trying to make a high score list that takes the user’s ending score on the win condition I have and append it to a p or div at the least, and then save it. I have this code:

function saveHighScore() {
  let date = new Date()
  let highScoreDivNew = document.createElement("div")
  let highScoreNumbers = document.innerHTML = `Your high score is ${pikmin.numberOf} on ${date}!`
  highScoreDiv.appendChild(highScoreDivNew)
  document.body.insertBefore(highScoreNumbers, highScoreDivNew)
  localStorage.setItem("highScoreContent", highScoreNumbers)
}

I can supply any other code if needed. This code doesn’t really "run" or do anything without the rest of my code and images, elements, selectors, etc. I already got localStorage working using this code:

    dayTimer.innerHTML = `<p>You have taken ${dayCounter}/6 days!</p>`
    dayTimer.class = "save-timer"

    function saveDayTimer() {
        localStorage.setItem("dayCounter", dayTimer)
    }

This displays it as 0/6 in my code at the moment and ticks up from 0 -> 1 -> 2 etc when the user ends a round.

But since I’m not using two "selectors" as it were, not sure what to call those, I can’t figure it out. I’ve also been working on this project all week so my brain is a little mush. When I run this and "win" a round with a "score", it gives me this error.

script.js:63 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at saveHighScore (script.js:63:18)
    at updateDayTimer (script.js:138:9)
    at HTMLButtonElement.<anonymous> (script.js:103:5)

Which I understand means it’s not an HTML DOM element being appended, but since I’m trying to append highScoreDivNew I thought that would work. I’ve lurked around on SO for a while looking for an answer to this and maybe it’s just mush-brain, but I can’t seem to find any answers that fit this or that I can make work.

I’ve mostly tried making a new variable with document.createElement, but as far as I could tell the innerHTML is supposed to be inside the new div element? The MDN docs are a little confusing on .createElement.

My goal is to dynamically insert high score elements into my highScoreDiv when the player reaches a win state, which is a div that comes up when I press a button. I don’t necessarily need to store and retrieve it, just display it, so I’m not looking for answers using json or jquery or whatnot since I don’t know those languages yet.

Entirety of Code: Code link

Tags:

2

Answers


  1. 0

    Here’s how you can do it without using JSON:

          // Function to save high score
function saveHighScore() {
  let date = new Date();
  let highScoreDiv = document.getElementById("highScoreDiv"); // Assuming you have a div with the id "highScoreDiv"
  let highScoreNumbers = `Your high score is ${pikmin.numberOf} on ${date}!`;

  let highScoreDivNew = document.createElement("div");
  highScoreDivNew.textContent = highScoreNumbers; // Use textContent to set the text of the new div

  highScoreDiv.appendChild(highScoreDivNew);
  localStorage.setItem("highScoreContent", highScoreNumbers); // Store the high score directly as a string
}

// Function to load and display high score from localStorage
function loadHighScore() {
  let highScoreDiv = document.getElementById("highScoreDiv");
  let highScoreNumbers = localStorage.getItem("highScoreContent"); // Retrieve the high score as a string
  if (highScoreNumbers) {
    let highScoreDivNew = document.createElement("div");
    highScoreDivNew.textContent = highScoreNumbers; // Use textContent to set the text of the new div
    highScoreDiv.appendChild(highScoreDivNew);
  }
}
    Login or Signup to reply.
  2. 0

    The document.body.appendChild() method will append the specified element as a child of the element. I apologize for the confusion.

    To append the high score into a specific div that’s inside the body, you need to target that div and then use the appendChild() method to append the new high score element as a child of that div.

    Assuming you have a div with the id "highScoreDiv" in your HTML where you want to display the high scores, you can modify the saveHighScore() function like this:

    // Function to save high score
function saveHighScore() {
  let date = new Date();
  let highScoreDiv = document.getElementById("highScoreDiv"); // Assuming you have a div with the id "highScoreDiv"
  let highScoreNumbers = `Your high score is ${pikmin.numberOf} on ${date}!`;

  let highScoreDivNew = document.createElement("div");
  highScoreDivNew.textContent = highScoreNumbers; // Use textContent to set the text of the new div

  highScoreDiv.appendChild(highScoreDivNew);
  // localStorage.setItem("highScoreContent", highScoreNumbers); // Don't save as a string
  // Instead, let's store the high scores in an array:
  let highScores = JSON.parse(localStorage.getItem("highScores") || "[]"); // Retrieve existing scores or an empty array
  highScores.push(highScoreNumbers); // Add the new score to the array
  localStorage.setItem("highScores", JSON.stringify(highScores)); // Store the updated array as a string
}

    Make sure that you have a div with the id "highScoreDiv" in your HTML where you want the high scores to be displayed. If the div doesn’t exist, you’ll need to add it in your HTML like this:

    <div id="highScoreDiv"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search