¿Qué estoy haciendo?
Intento ejecutar dos funciones en orden, pero JavaScript está llamando y ejecutando dos funciones al mismo tiempo.
¿Cuál es el problema?
La función setModalBox da un error indefinido si se llama antes de la función setProjects .
¿Qué he probado ya?
Intenté usar Promise con setTimeout para que funcionara, pero a veces se puede llamar a la función setModalBox antes y dar el mismo error.
Parte de JavaScript:
class Portifolio{ init() { this.setProjects(); // this.setModalBox(); } setProjects() { let response_promise = fetch("contents/projects.json") document.addEventListener("DOMContentLoaded", function() { response_promise.then(response => response.json().then(projects => { // ? Gradient in border for each color language for(let project in projects){ // Div project var div = document.createElement("div"); div.className = "project"; div.id = `project-${projects[project].name}` document.querySelector(".projects").appendChild(div); // Tittle project var h1 = document.createElement("h1"); h1.className = "tittle-project"; h1.innerHTML = projects[project].name; document.querySelector(`#project-${projects[project].name}`).appendChild(h1); // Paragraph project var p = document.createElement("p"); p.className = "about-project"; p.innerHTML = projects[project].about; document.querySelector(`#project-${projects[project].name}`).appendChild(p); } })) }, false) return new Promise((resolve, reject)=>{ setTimeout(()=>{ this.setModalBox() }, Math.random() * 2000) }) }; setModalBox(){ let projectsLength = document.querySelectorAll(".projects")[0].children.length; let modalBox = this.modalBox; for(let i = 0; i <= projectsLength; i++){ let projectsAll = document.querySelectorAll(".projects")[0].children[i]; // That "try" is for not to show error in console try{ // Open Modal Box projectsAll.onclick = function(){ modalBox.style.display = "block" }; }catch{} // Close Modal Box, when click at "X" this.modalBoxClose.onclick = function(){ modalBox.style.display = "None" }; // Close Modal Box, when click out of Modal Box window.onclick = function(){ if(event.target == modalBox){ modalBox.style.display = "None" } } // Close Modal Box, when press esc key document.addEventListener("keydown", function(event){ if(event.key == "Escape"){ modalBox.style.display = "None" } }) } } }HTML:
<!DOCTYPE html> <html lang="pt-br"> <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>Projetos - Vitor Hugo's Portifolio</title> <link rel="stylesheet" href="style.css" /> <script src="script.js" defer></script> </head> <body> <header> <div id="wrapperJS" style="position: relative; overflow: hidden"> <nav> <a class="logo" href="/">Vitor Hugo</a> <div class="mobile-menu"> <div class="line-1"></div> <div class="line-2"></div> <div class="line-3"></div> </div> <ul class="nav-list"> <li><a href="index.html">Home</a></li> <li><a href="sobre.html">Sobre</a></li> <li><a href="projetos.html">Projetos</a></li> <li><a href="contatos.html">Contato</a></li> </ul> </nav> </div> </header> <script src="mobile-screen.js"></script> <!-- Boxes --> <div class="projects"></div> <!-- Modal Boxes --> <div class="modal-box"> <div class="modal-box-contents"> <span class="modal-box-close">×</span> <p>test</p> </div> </div> </body> </html>¿Lo que tengo que hacer? por favor, ayúdame. Si necesita más información, pregunte. Y perdón por cualquier error de ortografía y gramática, estoy estudiando inglés.
Prueba asíncrono/espera. Por ejemplo puedes hacerlo así:
const setProjects = async () => { try { await // Put your code here }catch (err){ console.log(err) } };Luego :
setProjects().then(setModalBox());Ahora sus funciones se ejecutarán en un orden.
Simplemente puede llamar a setModalBox al final del controlador de eventos DOMContentLoaded.