Question

0

264

Views

Why is my modal system not working at all?

I need to open the modal in specific conditions.

The system needs to:

Open the modal in specific conditions.
Open the correct modal in specific conditions.

There are no error messages, making it harder to track down.

I've tried running modalSys() directly from the console to no avail.

function modalSys() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.getItem("data") === undefined) {
      console.log("This user has no data.")
      let modal = document.getElementById("nodata");
      modal.style.display = "block";
    };
  } else {
    console.error("This browser does not support LocalStorage.");
    let modal = document.getElementById("nostore");
    modal.style.display = "block";
  };
};

@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
div {
  background-color: #888888;
  border-radius: 15px;
}

h1 {
  color: white;
  font-family: Questrial;
}

.selectoff {
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* supported by Chrome and Opera */
}

.head {
  height: 75px;
}

#imgh {
  display: inline-block;
  margin-right: 10px;
}

#h1h {
  display: inline-block;
}

h1+h2+h3+h4+h5+h6+p {
  color: white;
  font-family: Questrial;
}

.center {
  text-align: center;
}

.lhalf {
  float: left;
  width: 75%;
}

.rhalf {
  float: right;
  width: 75%;
}

button {
  width: 75px;
  height: 50px;
  border-radius: 15px;
  font-family: Questrial;
  background-color: red;
}

.modal {
  display: none;
}

<body>
  <script src="scripting.js"></script>
  <header>
    <div class="selectoff head">
      <img src="https://via.placeholder.com/50" alt="Favicon/Logo" id="imgh">
      <h1 id="h1h">example</h1>
    </div>
  </header>
  <div id="nodata" class="modal">
    <span>&times;</span>
    <h1>Uh oh!</h1>
    <p>It looks like you don't have any data.</p>
  </div>
  <div id="nostore" class="modal">
    <span>&times;</span>
    <h1>Uh oh!</h1>
    <p>This browser does not support LocalStorage.</p>
  </div>
</body>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-24T18:51:37.728Z

There are few things I can think of:

You nowhere seem to call the modalSys() function.
You need to include the JavaScript file, at the end of the body. If you include it at the beginning, where the elements are not loaded, then it will throw error.

function modalSys() {
  if (false) { //changed to false for testing purposes
    if (localStorage.getItem("data") === undefined) {
      console.log("This user has no data.")
      let modal = document.getElementById("nodata");
      modal.style.display = "block";
    };
  } else {
    console.log("This browser does not support LocalStorage.");
    let modal = document.getElementById("nostore");
    modal.style.display = "block";
  };
};

modalSys()

@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
div {
  background-color: #888888;
  border-radius: 15px;
}

h1 {
  color: white;
  font-family: Questrial;
}

.selectoff {
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* supported by Chrome and Opera */
}

.head {
  height: 75px;
}

#imgh {
  display: inline-block;
  margin-right: 10px;
}

#h1h {
  display: inline-block;
}

h1+h2+h3+h4+h5+h6+p {
  color: white;
  font-family: Questrial;
}

.center {
  text-align: center;
}

.lhalf {
  float: left;
  width: 75%;
}

.rhalf {
  float: right;
  width: 75%;
}

button {
  width: 75px;
  height: 50px;
  border-radius: 15px;
  font-family: Questrial;
  background-color: red;
}

.modal {
  display: none;
}

<body>
  <header>
    <div class="selectoff head">
      <img src="https://via.placeholder.com/50" alt="Favicon/Logo" id="imgh">
      <h1 id="h1h">example</h1>
    </div>
  </header>
  <div id="nodata" class="modal">
    <span>&times;</span>
    <h1>Uh oh!</h1>
    <p>It looks like you don't have any data.</p>
  </div>
  <div id="nostore" class="modal">
    <span>&times;</span>
    <h1>Uh oh!</h1>
    <p>This browser does not support LocalStorage.</p>
  </div>
  <script src="scripting.js"></script>
</body>

0

264

Why is my modal system not working at all?

1 answers

0

Find remote jobs

Andres GPT