Quick question on buttons

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)

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

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

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

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?

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

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

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

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.