Поместите автоматические c подзаголовки в мою таблицу содержания

Question

Я хочу автоматизировать c подзаголовки, может ли кто-нибудь мне помочь?

Я только вчера изучил свойство DOM. Я просто знаком с HTML css.

function bttext() {


  var btn = document.getElementById("bttext");
  if (btn.innerText == "show") {
    btn.innerText = "hide";
  } else {
    btn.innerText = "show";
  }
  var x = document.getElementById("hide");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

var hsub = sub = s = htoc = i = hl = gh = 0;

hl = document.getElementById("p-toc").getElementsByTagName("h2").length;

for (i = 0; i < hl; i++) {
  gh = document.getElementById("p-toc").getElementsByTagName("h2")[i].innerText;

  document.getElementById("p-toc").getElementsByTagName("h2")[i].setAttribute("id", "point" + i);

  htoc = "<li><a href='#point" + i + "'>" + gh + "</a></li>";

  document.getElementById("htoc").innerHTML += htoc;


}

hsub = document.getElementById("p-toc").getElementsByTagName("h3").length;

for (s = 0; s < hsub; s++) {
  sub = document.getElementById("p-toc").getElementsByTagName("h3")[i].innerText;

  document.getElementById("p-toc").getElementsByTagName("h3")[i].setAttribute("id", "sub" + i);

  stoc = "<li><a href='#sub" + i + "'>" + sub + "</a></li>";

  document.getElementById("stoc").innerHTML += stoc;
}



//*************TOC plugin by MyBloggerTricks.com           
function mbtTOC() {
  var mbtTOC = i = headlength = gethead = 0;
  headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;
  for (i = 0; i < headlength; i++) {
    gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;
    document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point" + i);
    mbtTOC = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
    document.getElementById("mbtTOC").innerHTML += mbtTOC;
  }
}

function mbtToggle() {
  var mbt = document.getElementById('mbtTOC');
  if (mbt.style.display === 'none') {
    mbt.style.display = 'block';
  } else {
    mbt.style.display = 'none';
  }
}

.toc {
  border: 3px solid #A2A9B1;
  background-color: #F8F9FA;
  display: block;
  line-height: 1.4em;
  width: 70%;
  display: block;
  padding: 20px 30px 10px;
  border-radius: 5px;
}

.toc button {
  background-color: inherit;
  font-size: 16px;
  outline: none;
  border: none;
  padding: 0px 0px 10px;
  color: blue;
}

.toc span {
  font-size: 20px;
}

.toc ol>li {
  counter-increment: item;
}

.toc ol>li:first-child {
  counter-reset: item;
}

.toc ol ol>li {
  display: block;
}

.toc ol ol>li:before {
  content: counters(item, ".") ". ";
  margin-left: -20px;
}

.e {
  height: 500px;
  margin: 40px;
}

<div id="p-toc">
  <div class="toc">
    <span>Contents [ <button id="bttext" onclick="bttext();">hide</button> ] </span>
    <div id="hide">

      <ol id="htoc">

      </ol>

    </div>
  </div>
  <div class="e">
    new
  </div>
  <h2>sameer</h2>
  <h3>sameer 111</h3>
  <h3>sameer 1big11</h3>
  <h3>sameer small</h3>
  <div class="e">
    new
  </div>
  <h2>sameer lai susu ayo</h2>
  <div class="e">
    new
  </div>
  <h2>sameer ko big ass</h2>
  <div class="e">
    new
  </div>
  <h2>sameer ko fly jatro brain</h2>
</div>

Answer 1

Пожалуйста, посмотрите querySelectorAll

function bttext() {
  var btn = document.getElementById("bttext");
  btn.innerText = btn.innerText == "show" ? "hide" : "show";

  var x = document.getElementById("hide");
  x.style.display = x.style.display === "none" ? "block" : "none";
}

let htoc = [...document.querySelectorAll("#p-toc h2")].map((header, i) => {
  const gh = header.innerText;
  header.setAttribute("id", "point" + i);
  return "<li><a href='#point" + i + "'>" + gh + "</a></li>";
})
document.getElementById("htoc").innerHTML = htoc.join("");

/* no stoc in page 
let stoc = [...document.querySelectorAll("#p-toc h3")].map((header, i) => {
  const gh = header.textContent;
  header.setAttribute("id", "sub" + i);
  return "<li><a href='#sub" + i + "'>" + gh + "</a></li>";
})
document.getElementById("stoc").innerHTML = stoc.join("");
*/

.toc {
  border: 3px solid #A2A9B1;
  background-color: #F8F9FA;
  display: block;
  line-height: 1.4em;
  width: 70%;
  display: block;
  padding: 20px 30px 10px;
  border-radius: 5px;
}

.toc button {
  background-color: inherit;
  font-size: 16px;
  outline: none;
  border: none;
  padding: 0px 0px 10px;
  color: blue;
}

.toc span {
  font-size: 20px;
}

.toc ol>li {
  counter-increment: item;
}

.toc ol>li:first-child {
  counter-reset: item;
}

.toc ol ol>li {
  display: block;
}

.toc ol ol>li:before {
  content: counters(item, ".") ". ";
  margin-left: -20px;
}

.e {
  height: 500px;
  margin: 40px;
}

<div id="p-toc">
  <div class="toc">
    <span>Contents [ <button id="bttext" onclick="bttext();">hide</button> ] </span>
    <div id="hide">

      <ol id="htoc">

      </ol>

    </div>
  </div>
  <div class="e">
    new
  </div>
  <h2>sameer</h2>
  <h3>sameer 111</h3>
  <h3>sameer 1big11</h3>
  <h3>sameer small</h3>
  <div class="e">
    new
  </div>
  <h2>sameer lai susu ayo</h2>
  <div class="e">
    new
  </div>
  <h2>sameer ko big ass</h2>
  <div class="e">
    new
  </div>
  <h2>sameer ko fly jatro brain</h2>
</div>