Embedded JavaScript

Biblija

<div id="book-selection">
    <label for="book">Izaberite knjigu:</label>
    <select id="book" onchange="loadChapters(this.value)">
        <!-- Books will be added here dynamically -->
    </select>
</div>

<div id="chapter-selection" style="display:none;">
    <label for="chapter">Izaberite poglavlje:</label>
    <select id="chapter" onchange="displayChapter(this.value)">
        <!-- Chapters will be added here dynamically -->
    </select>
</div>

<div id="content">
    <!-- Selected chapter content will be displayed here -->
</div>

<script>
    // Load chapters for selected book
    function loadChapters(book) {
        const chapterSelection = document.getElementById("chapter");
        chapterSelection.innerHTML = ""; // Clear previous options
        for (const chapter in bibleData[book]) {
            const option = document.createElement("option");
            option.value = chapter;
            option.textContent = "Poglavlje " + chapter;
            chapterSelection.appendChild(option);
        }
        document.getElementById("chapter-selection").style.display = "block";
    }

    // Display the selected chapter's content
    function displayChapter(chapter) {
        const book = document.getElementById("book").value;
        const content = document.getElementById("content");
        const verses = bibleData[book][chapter];
        content.innerHTML = ""; // Clear previous content
        
        // Append each verse in order
        for (const verse in verses) {
            const verseParagraph = document.createElement("p");
            verseParagraph.textContent = `${verse}: ${verses[verse]}`;
            content.appendChild(verseParagraph);
        }
    }

    // Populate book dropdown menu
    const bookSelection = document.getElementById("book");
    for (const book in bibleData) {
        const option = document.createElement("option");
        option.value = book;
        option.textContent = book;
        bookSelection.appendChild(option);
    }
</script>