Statement only working in browser console

Question: I was recently working on a part of my game with a save function, but when I was trying to set an object using a value that was saved in localStorage, it wouldn’t work, but when I would put that same statement into the console, it would work. The statement is on line 102 of sandboxScript.js. You need to input a JSON file on the first page. Here are the contents of the file:

{
  "username": "Eggs Benedict",
  "levelsFinished": 0,
  "circuits": {
    "testCircuit": {
      "0": {
        "element": {},
        "x": 67,
        "y": 60,
        "type": "switch",
        "inputs": [],
        "outputs": [
          {
            "element": {},
            "x": 120,
            "y": 83,
            "value": 0,
            "connections": [
              [
                "3",
                1
              ]
            ]
          }
        ]
      },
      "1": {
        "element": {},
        "x": 65,
        "y": 144,
        "type": "switch",
        "inputs": [],
        "outputs": [
          {
            "element": {},
            "x": 118,
            "y": 167,
            "value": 0,
            "connections": [
              [
                "3",
                2
              ]
            ]
          }
        ]
      },
      "2": {
        "element": {},
        "x": 338,
        "y": 99,
        "type": "light",
        "inputs": [
          {
            "element": {},
            "x": 331,
            "y": 122,
            "value": 0,
            "connections": []
          }
        ],
        "outputs": []
      },
      "3": {
        "element": {},
        "x": 191,
        "y": 99,
        "type": "and",
        "inputs": [
          {
            "element": {},
            "x": 184,
            "y": 106,
            "value": 0
          },
          {
            "element": {},
            "x": 184,
            "y": 127,
            "value": 0
          }
        ],
        "outputs": [
          {
            "element": {},
            "x": 264,
            "y": 117,
            "value": 0,
            "connections": [
              [
                "2",
                1
              ]
            ]
          }
        ]
      }
    }
  }
}

Repl link: Circuit Simulator

I don’t see an error:


What am I missing?

They said that you need to:

Sorry, you need to click on the link that says sandbox mode, and then click on the link that says testCircuit. There, the logic gates will pop up, but It will throw an error if I drag any of them.

after inputting the json file that contains the data I stated in the original post.

Sorry I didn’t specify, but I saved you data to a file named test.json and then uploaded it. I reloaded the page, so it wasn’t immediately apparent that I had imported the JSON file.

Your problem is line 201 on SandboxScript.js:

x: document.getElementById(nextId).offsetLeft + document.getElementById(nextId).getElementsByClassName("lightInput")[0].offsetLeft,

here, you attempt to access:
document=DocumentElement → getElementById=DOMElement → getElementByClassName=undefined → [0]=undefined → offsetLeft=undefined.

The problem is that the element returned by document.getElementById does not have a function called getElementByClassName (which is defined directly under document). Try using:

x: document.getElementById(nextId).offsetleft + document.querySelectorAll(`.lightInput#${nextId}`)[0].offsetLeft,
1 Like

I’m sorry but I don’t think that was the cause of the error. That code was there before I started to work on the save load feature, and it wasn’t throwing any errors. The main thing that wasn’t working was the statement on line 102 of sandboxScript.is that was supposed to set the gateObject variable to the circuit data that is saved in localStorage, but it wasn’t setting the variable, but when I put that same statement into the js console, it works

Would you mind sending a screenshot of the error message? I can only reproduce the error described above.

It won’t produce an error message, and if I try to move one of the gates, it will throw an error because there is no data in gateObject.

How did you come to that conclusion?

I looked up gateObject in the JavaScript Console and it returned an empty object

The program would search in the object to get the data for the gates, but without any data, the program wouldn’t work properly.

One issue I immediately see is that Sandbox_Mode/setupScript.js is trying to read JSON from localStorage, but on the first page load, there is nothing in localStorage.

Here’s an easy fix that utilises the fact that localStorage.getItem returns null if no such item exists:

const saveFile = JSON.parse(localStorage.getItem("saveFile") || "{}");

Edit: This also applies to Sandbox_Mode/Sandbox.js.

But then the next issue is your if statement below, here is a good place to use JavaScript’s in operator, which checks if a key is in an object:

if ("circuits" in saveFile) {

I think you might be assuming that this:

if (saveFile.circuits != {}) {

Checks if the circuits object in saveFile is empty, but it’s really checking if it is not equal to the same reference, which will always be true. In JavaScript, objects and arrays are always passed by reference (it can be a bit confusing at first :smile:).

I get to the circuit area after fixing these issues.

1 Like

Please fix the error i described above, then deal with line 102. Chances are, the issue of the UI not working is linked to line 202’s bug rather than a more logic-based part, like line 102.

I apologize, but I added the line that you suggested earlier in the post isn’t working.

I think I found the problem. I was trying to set gateObject before it was declared.

2 Likes

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