call include inside js

Question

found a code that changes the url without refresh, but wanted to include two pages inside js according to their url, when I click

html

<ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="" data-tab-for="geral">Geral</a></li>

    <li class="nav-item">
      <a class="nav-link" href="" data-tab-for="buna-silva">Bruna Silva</a></li>

    <li class="nav-item"><a class="nav-link" href="" data-tab-for="amanda-castro">Amanda Castro</a></li>
</ul>

<div class="content">
    <p id="geral">Geral</p>
    <p id="buna-silva" class="hide">Bruna Silva</p>
    <p id="amanda-castro" class="hide">Amanda Castro</p>
</div>

htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?url=$1

js

var tabs = document.querySelectorAll("a[data-tab-for]");

var contents = document.querySelectorAll(".content>p");

tabs.forEach(tab => tab.addEventListener('click', tabClicked));

window.onpopstate = checkState;

history.replaceState({tabForId: tabs[0].dataset.tabFor}, null, ""+tabs[0].dataset.tabFor);

function showContent(id) {

  contents.forEach(content => {
    if (content.getAttribute('id') === id) 
        content.classList.remove('hide');
    else 
        content.classList.add('hide');
  });

  tabs.forEach(tab => {
    if (tab.dataset.tabFor === id) 
      tab.classList.add("active");
    else 
      tab.classList.remove("active");
   });

}

function tabClicked(e) {
  var contentId = e.target.dataset.tabFor;
  e.preventDefault();
  showContent(contentId);
  history.pushState({tabForId: contentId}, null, ""+contentId);

if(contentId == 'geral') {
  // linha do erro da variavel indefinida
  document.querySelectorAll(".content").innerHTML = "<?php require_once('lobby.php');?>";
} else {

  document.querySelectorAll(".content").innerHTML = "<?php require_once('private.php');?>";
}
console.log(content);
}

function checkState(e) {
  if(e.state) {
    console.log(e.state.tabForId);
    showContent(e.state.tabForId);
  }
}

Answer 1

Is giving error in Function tabClicked, making that "content" is not defined, and is not even, see well the body of Function:

function tabClicked(e) {
    var contentId = e.target.dataset.tabFor;
    e.preventDefault();
    showContent(contentId);
    history.pushState({
        tabForId: contentId
    }, null, "" + contentId);

    if (contentId == 'geral') {
        // linha do erro da variavel indefinida
        document.querySelectorAll(".content").innerHTML = "<?php require_once('lobby.php');?>";
    } else {

        document.querySelectorAll(".content").innerHTML = "<?php require_once('private.php');?>";
    }
    console.log(content);  // <-este content, onde foi declarado???
}

I left the commented line to help identify. I don’t know what I wanted to observe here, maybe the contentId? Or would it be the variable contents?

Answer 2

function showContent(id) {

  contents.forEach(content => {
    if (content.getAttribute('id') === id) 
        content.classList.remove('hide');
    else 
        content.classList.add('hide');
  });

tries to give a console.log of content and see the result.