如何用JS实现点击按钮从XML随机选子元素并展示其子元素？

Hey there! Let's build a solution that lets users click a button to fetch your XML file, randomly select a <kdrama> entry, and display its details. Here's a complete, easy-to-follow implementation:

Step 1: HTML Structure #

First, create the basic page with a button and a container to show the selected drama info:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Random K-Drama Picker</title>
    <style>
        .drama-info {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            max-width: 500px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="pickDramaBtn">Pick a Random K-Drama!</button>
    <div id="dramaDisplay" class="drama-info"></div>

    <script src="script.js"></script>
</body>
</html>

Step 2: JavaScript Logic #

Create a script.js file that handles fetching, parsing, random selection, and display:

// Attach click event to the button
document.getElementById('pickDramaBtn').addEventListener('click', fetchRandomKdrama);

async function fetchRandomKdrama() {
    const displayElement = document.getElementById('dramaDisplay');
    
    try {
        // Fetch your XML file (update the path if your file is in a different folder)
        const response = await fetch('kdramas.xml');
        
        if (!response.ok) {
            throw new Error(`Failed to load XML: ${response.status} ${response.statusText}`);
        }
        
        // Parse the XML text into a DOM object
        const xmlText = await response.text();
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(xmlText, 'application/xml');
        
        // Get all <kdrama> elements from the XML
        const kdramaList = xmlDoc.querySelectorAll('kdrama');
        
        if (kdramaList.length === 0) {
            displayElement.innerHTML = '<p>No K-Drama entries found in the XML file.</p>';
            return;
        }
        
        // Pick a random index from the list
        const randomIndex = Math.floor(Math.random() * kdramaList.length);
        const selectedDrama = kdramaList[randomIndex];
        
        // Extract data from the selected drama's child elements
        const title = selectedDrama.querySelector('title').textContent;
        const genre = selectedDrama.querySelector('genre').textContent;
        const year = selectedDrama.querySelector('year').textContent;
        const episodes = selectedDrama.querySelector('episodes').textContent;
        const about = selectedDrama.querySelector('about')?.textContent || 'No description available';
        
        // Display the formatted info
        displayElement.innerHTML = `
            <h3>${title}</h3>
            <p><strong>Genre:</strong> ${genre}</p>
            <p><strong>Year:</strong> ${year}</p>
            <p><strong>Episodes:</strong> ${episodes}</p>
            <p><strong>About:</strong> ${about}</p>
        `;
        
    } catch (error) {
        // Show error message if something goes wrong
        displayElement.innerHTML = `<p>Oops! Something went wrong: ${error.message}</p>`;
    }
}

Step 3: Your XML File Example #

Make sure your kdramas.xml file follows this structure (add/remove fields as needed):

<?xml version="1.0" encoding="UTF-8"?>
<kdramas>
    <kdrama>
        <title lang="en">A Gentleman's Dignity</title>
        <genre>Comedy, Romance, Drama</genre>
        <year>2012</year>
        <episodes>20</episodes>
        <about>A story about four men in their forties navigating love, friendship, and adulthood.</about>
    </kdrama>
    <kdrama>
        <title lang="en">Crash Landing on You</title>
        <genre>Romance, Drama</genre>
        <year>2019</year>
        <episodes>16</episodes>
        <about>A South Korean heiress accidentally lands in North Korea and forms a bond with a military officer.</about>
    </kdrama>
    <kdrama>
        <title lang="en">Squid Game</title>
        <genre>Thriller, Drama</genre>
        <year>2021</year>
        <episodes>9</episodes>
        <about>Desperate contestants compete in deadly children's games for a chance to win a massive cash prize.</about>
    </kdrama>
</kdramas>

Important Tips #

• File Placement: Keep all three files (HTML, JS, XML) in the same folder, or adjust the fetch path in script.js to match your directory structure.
• Local Testing: Some browsers block local file fetches. Use a simple local server (like python -m http.server in Python, or VS Code's Live Server extension) to test the page properly.
• Extensibility: Add more fields to the display by copying the pattern used for title or genre—just make sure those elements exist in your XML.

内容的提问来源于stack exchange，提问作者nichole