Loading content inside a div-CodePudding

I've recently started learning JavaScript, and lately, I've been doing some exercises to gain skills, but I don't know if I'm doing it right on this one.

I'm trying to load a page inside a div that will be shown to the user after pressing the buttons on the 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>

Should I've been doing it this way, or is there a better way of doing it?

Thank you :)

CodePudding user response：

The reason your code working, you put the document ready inside click event here you doing wrong

document.getElementById("btnConta").addEventListener("click", function () {
    $(document).ready(function () {
        $("#content").load("http://127.0.0.1:5500/conta.html");
    });
});

you have ready DOM only once and put all your click events inside it like below

   $(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");
    });
});

it's not working here due to cross-origin blocking to open URL you can check it now in your code it works perfectly.

  <!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>