Çözüldü H etiketlerini kullanarak içindekiler kutusu oluşturma

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Mucosoft

Mucosoft

Megapat
Katılım
5 Mart 2014
Mesajlar
5.531
Makaleler
12
Çözümler
41
JavaScript: 
var HTags = [];
for (var i = 2; i <= 6; i++) {
 HTags = HTags.concat(InfoText.getElementsByTagName('h' + i));
}

Bu kodla h etiketlerini çekiyorum.
H2 etiketini düzgün bir biçimde görüntüleyebiliyorum fakat H3 ve sonraki etiketleri düzgün bir biçimde görüntülemek için nasıl bir çözüm önerirsiniz? Yani H1, h2, h3, h4, H5 ve H6 başlıkları sırasına göre görüntülenecek. Örneğin 2 adet H2 başlığı var ise her H2 başlığının altında H3 başlıkları bulunmalı. Bunun gibi hiyerarşik olmasını istiyorum. Yapay zekaya sordum fakat bazı detayları yapamadığı için sizlere soruyorum.
Şu anda kullandığım kod bu:

JavaScript: 
if (HTags.length >= 1) {
 var Content = `<div style = 'min-height: 45px; border: 1px solid lightgray; background: #f8f9fa; width: max-content; margin-left: 10px;'>
 <center><b>İçindekiler</b><br/>
 <button id = 'ToggleContents' onclick = 'ToggleContents();'>Gizle</button>
 </center><div id = 'Contents'>`;

 for (var i = 0; i < HTags.length; i++) {
 Content += `<a href='#${HTags[i].HTag.textContent}'>${HTags[i].HTag.textContent}</a><br/>`;
 }

 Content += `</div></div>`;
 document.getElementById('InfoContent').innerHTML = Content;
}
 
Son düzenleyen: Moderatör:
Çözüm
Mucosoft
JavaScript: 
// İçindekiler kutusu için div oluşturalım
var contentsDiv = document.createElement("div");
contentsDiv.id = "contents";
contentsDiv.style.backgroundColor = "#f8f9fa"; // Arka plan rengini ayarlayalım
contentsDiv.style.border = "1px solid lightgray";

var boldTitle = document.createElement("b"); // Kalın başlık oluşturalım
boldTitle.innerHTML = "İçindekiler<br/>";
contentsDiv.appendChild(boldTitle); // Kalın başlığı içindekilere ekleyelim

// Content içerisindeki h etiketlerini bulalım
var contentDiv = document.getElementById("Content100");
var hTags = contentDiv.querySelectorAll("h2, h3, h4, h5, h6");

// İçindekiler kutusunu oluşturalım
var ul = document.createElement("ul");
ul.style.display = "inline";

hTags.forEach(function(tag) {
    // Her h etiketi için bir liste öğesi (li) oluşturalım
    var li = document.createElement("li");

    // Boşluk ekleyelim
    var indentation = "&nbsp;".repeat(parseInt(tag.tagName.substring(1)) - 2);

    // Bağlantı oluşturalım ve içeriği ekleyelim
    var link = document.createElement("a");
    link.innerHTML = indentation + tag.textContent;
    link.href = "#" + tag.id;

    // Listeye bağlantıyı ekleyelim
    li.appendChild(link);

    // Liste öğesini içindekiler kutusuna ekleyelim
    ul.appendChild(li);
});

// Gizle/Göster butonunu oluşturalım
var toggleButton = document.createElement("button");
toggleButton.textContent = "Gizle";
toggleButton.onclick = function() {
    var contents = document.getElementById("contents");
    var ul = contents.querySelector("ul");
    if (ul.style.display !== "none") {
        ul.style.display = "none";
        toggleButton.textContent = "Göster";
    } else {
        ul.style.display = "inline";
        toggleButton.textContent = "Gizle";
    }
};

// Butonu içindekiler kutusunun altına ekleyelim
contentsDiv.appendChild(toggleButton);

// İçindekiler kutusunu tamamlayalım ve content div içerisine ekleyelim
contentsDiv.appendChild(ul);
contentDiv.insertBefore(contentsDiv, contentDiv.firstChild);
document.getElementById("contents").style.display = "inline-block";
if (hTags.length < 1) {document.getElementById("contents").style.display = "none";}

Yapay zekanın da desteğiyle çaba sarf ederek sonunda istediğim şeyi kodlattım. Bu kod için bir sürü sorgu girdim, sonunda doğru koda ulaştım.
Tarihe göre sırala Puana göre sırala
Şuna benzer bir kod işini görür. Test etmedim. Technopat üzerinde yazdım. Syntax hatası veya logic hatası olabilir. Onuda çözersin. Mantık olarak göstereyim dedim.
JavaScript: 
var generatorContent = (tagNumber, el) => {
    var tagEls = el.getElementsByTagName("h" + tagNumber);
    var content = []
    for(const tag of tagEls) {
        content.push({
            title: tag.textContent,
            sub: generatorContent(tagNumber+1, tag)
        })
    }
    return content;
}
 
Artı 0 Eksi
JavaScript: 
// İçindekiler kutusu için div oluşturalım
var contentsDiv = document.createElement("div");
contentsDiv.id = "contents";
contentsDiv.style.backgroundColor = "#f8f9fa"; // Arka plan rengini ayarlayalım
contentsDiv.style.border = "1px solid lightgray";

var boldTitle = document.createElement("b"); // Kalın başlık oluşturalım
boldTitle.innerHTML = "İçindekiler<br/>";
contentsDiv.appendChild(boldTitle); // Kalın başlığı içindekilere ekleyelim

// Content içerisindeki h etiketlerini bulalım
var contentDiv = document.getElementById("Content100");
var hTags = contentDiv.querySelectorAll("h2, h3, h4, h5, h6");

// İçindekiler kutusunu oluşturalım
var ul = document.createElement("ul");
ul.style.display = "inline";

hTags.forEach(function(tag) {
    // Her h etiketi için bir liste öğesi (li) oluşturalım
    var li = document.createElement("li");

    // Boşluk ekleyelim
    var indentation = "&nbsp;".repeat(parseInt(tag.tagName.substring(1)) - 2);

    // Bağlantı oluşturalım ve içeriği ekleyelim
    var link = document.createElement("a");
    link.innerHTML = indentation + tag.textContent;
    link.href = "#" + tag.id;

    // Listeye bağlantıyı ekleyelim
    li.appendChild(link);

    // Liste öğesini içindekiler kutusuna ekleyelim
    ul.appendChild(li);
});

// Gizle/Göster butonunu oluşturalım
var toggleButton = document.createElement("button");
toggleButton.textContent = "Gizle";
toggleButton.onclick = function() {
    var contents = document.getElementById("contents");
    var ul = contents.querySelector("ul");
    if (ul.style.display !== "none") {
        ul.style.display = "none";
        toggleButton.textContent = "Göster";
    } else {
        ul.style.display = "inline";
        toggleButton.textContent = "Gizle";
    }
};

// Butonu içindekiler kutusunun altına ekleyelim
contentsDiv.appendChild(toggleButton);

// İçindekiler kutusunu tamamlayalım ve content div içerisine ekleyelim
contentsDiv.appendChild(ul);
contentDiv.insertBefore(contentsDiv, contentDiv.firstChild);
document.getElementById("contents").style.display = "inline-block";
if (hTags.length < 1) {document.getElementById("contents").style.display = "none";}

Yapay zekanın da desteğiyle çaba sarf ederek sonunda istediğim şeyi kodlattım. Bu kod için bir sürü sorgu girdim, sonunda doğru koda ulaştım.
 
Artı 0 Eksi
Çözüm

Benzer konular

Mucosoft
  • Soru
HTML etiketlerini veritabanına göndermek
Mesaj
5
Görüntüleme
329
Kxaan
Kxaan
Jibijeb
React ile bir sayfadaki bilgiler kullanarak yeni sayfa oluşturma nasıl yapılır?
Mesaj
3
Görüntüleme
1B
qelos
qelos
E
PHP kullanarak okul gazetesi oluşturmak
Mesaj
0
Görüntüleme
309
efe.varoll
E
itachiiii
  • Çözüldü
Çözüldü  "div" kodunun içindekiler çalışmıyor
Mesaj
4
Görüntüleme
303
itachiiii
itachiiii
B
  • Soru
Dreamweaver'da sadece CSS kullanarak form oluşturmak
Mesaj
1
Görüntüleme
451
IIBySinyoRII
IIBySinyoRII

Yeni konular

Yeni mesajlar

Geri
Yukarı