0
251
ViewsCargando contenido dentro de un div
Recientemente comencé a aprender JavaScript y, últimamente, he estado haciendo algunos ejercicios para adquirir habilidades, pero no sé si lo estoy haciendo bien en este.
Estoy tratando de cargar una página dentro de un div que se mostrará al usuario después de presionar los botones en el banner.
document.getElementById("btnConta").addEventListener("click", function() { $(document).ready(function() { $("#content").load("http://127.0.0.1:5500/conta.html"); }); }); document.getElementById("btnDenuncia").addEventListener("click", function() { $(document).ready(function() { $("#content").load("http://127.0.0.1:5500/denuncia.html"); }); }); document.getElementById("btnConta").addEventListener("click", function() { window.location.href = "index.html"; }); <!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>Pág. Inicial</title> <link href="pagInicial.css" rel="stylesheet"> <script type="module" src="pagInicial.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> </head> <body> <div class="wrapper"> <header role="banner"> <nav> <div class="logo"><img class="logo" src="Imagens/Logo2.png" alt="logo"></div> <div class="menu"> <ul> <a id="btnDenuncia" class="btn btn1">Denuncias</a> <a id="btnConta" class="btn btn1">Conta</a> <a id="btnLogout" href="#"><button>Logout</button></a> </ul> </div> </nav> </header> <div class="content" id="content"> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit </p> </div> </div> </body> </html> 
¿Debería haberlo hecho de esta manera, o hay una mejor manera de hacerlo?
Gracias :)
·
Juan Pablo Isaza
1 answers
Answer question0
La razón por la que su código funciona, usted prepara el documento dentro del evento de clic aquí, lo está haciendo mal
document.getElementById("btnConta").addEventListener("click", function () { $(document).ready(function () { $("#content").load("http://127.0.0.1:5500/conta.html"); }); });tienes DOM listo solo una vez y colocas todos tus eventos de clic dentro de él como se muestra a continuación
$(document).ready(function () { document.getElementById("btnConta").addEventListener("click", function () { $("#content").load("https://stackoverflow.com/users/8384983/neeraj); }); document.getElementById("btnDenuncia").addEventListener("click", function () { $("#content").load("https://stackoverflow.com/users/8384983/neeraj"); }); });no funciona aquí debido al bloqueo de origen cruzado para abrir la URL, puede verificarlo ahora en su código, funciona perfectamente.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { document.getElementById("btnConta").addEventListener("click", function () { $("#content").load("https://stackoverflow.com/company"); }); document.getElementById("btnDenuncia").addEventListener("click", function () { $("#content").load("https://stackoverflow.com/company"); }); }); </script> </head> <body> <div class="wrapper"> <header role="banner"> <nav> <div class="logo"><img class="logo" src="Imagens/Logo2.png" alt="logo"></div> <div class="menu"> <ul> <a id="btnDenuncia" class="btn btn1">Denuncias</a> <a id="btnConta" class="btn btn1">Conta</a> <a id="btnLogout" href="#"><button>Logout</button></a> </ul> </div> </nav> </header> <div class="content" id="content"> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit </p> </div> </div> </body> </html>
·
Juan Pablo Isaza
Report
Answer question