Quick question on buttons

JavaScript
1

Hello! So i’m trying to randomly save buttons to a localstorage array. When I refresh the page, the button values in the array are changed into objects. I was seeing if someone knows the cause of this. Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button id = "red">Red</button>
    <button id ="green">Green</button>
    <button id ="blue">Blue</button>
    <button id ="orange">Orange</button>
    <script src="app.js"></script>
</body>
</html>


const gameDecision = "Computer phase";
const buttonArray =  JSON.parse(localStorage.getItem("buttonArray")) || [];
const playerButtonArray = [];
const redButton = document.getElementById("red");
const greenButton = document.getElementById("green");
const blueButton = document.getElementById("blue");
const orangeButton = document.getElementById("orange");

function buttons(set){
    redButton.addEventListener("click", e =>{
        console.log("yes")
    })
    greenButton.addEventListener("click", e =>{
        console.log("yes")
    })
    if(gameDecision === "Computer phase"){
        set = Math.floor(Math.random() * 3);
    } if(set === 0){
        buttonArray.push(redButton);
       } else if(set === 1){
        buttonArray.push(greenButton);
       } 
updateLocalStorage()
}
buttons()


function updateLocalStorage(){
    localStorage.setItem("buttonArray", JSON.stringify(buttonArray));
}

console.log(buttonArray)
2

Oh wait, i think the buttons have to be values of objects…

3

Unrelated, but I kind of got it to work through different means. I’m still open to the explanation about the original question, though

4

Hi @yhean890

I suppose it is because localStorage stores items as string. The DOM element is first coerced to a string by invoking toString method before saving it in local storage. Check the example below.

const button = document.createElement("button");

localStorage.setItem("test", button);

console.log(localStorage.getItem("test")); // [object HTMLButtonElement]
console.log(button.toString()); // [object HTMLButtonElement]

console.log(localStorage.getItem("test") === button.toString());
5

ButtonArray contains objects bc the html elements you are storing are objects.

Are you trying to store the element ex: <button id="green">Green</button> (which is being stored as an object) or the value?

6

Correct, I was trying to store the buttons, as per your example.

7

Ok got it. So those elements are stored as objects in the array. I hope this helped :upside_down_face:

8

Ah gotcha, I figured. Thx. Is there a way to turn the buttons back from their obejct forms?

9

I would suggest not storing the buttons as strings. I would store the buttons as an array of objects with each object having and id and textColor property, so you can recreate the button elements later and give them the applicable ids and color name for the button text. To create elements you can use the createElement method.

10

You can probably use .outerHTML for the elements

buttonArray.push(redButton.outerHTML)

But I agree, it doesn’t seem like you need to save the elements for what you are doing.