Ejemplos de JavaScript: formulario de pedidos JSON y clasificación XML con fetch y DOMParser

✅ palillos.js correcto JavaScript

// Variables
let formPalillos = document.getElementById("formularioPalillos");
let txtCliente = document.getElementById("cliente");
let txtEmpresa = document.getElementById("empresa");
let selTipoPalillo = document.getElementById("tipoPalillo");
let numCantidad = document.getElementById("cantidad");
let selUnidadesCaja = document.getElementById("unidadesCaja");
let numPrecio = document.getElementById("precio");
let selEstado = document.getElementById("estado");
let salidaJSON = document.getElementById("salidaJSON");

// Evento
formPalillos.addEventListener("submit", generarJSON);

function generarJSON(event) {
    event.preventDefault();
    let pedido = {
        cliente: txtCliente.value.trim(),
        empresa: txtEmpresa.value.trim(),
        tipoPalillo: selTipoPalillo.value,
        cantidad: parseInt(numCantidad.value),
        unidadesCaja: parseInt(selUnidadesCaja.value),
        precio: parseFloat(numPrecio.value),
        estado: selEstado.value
    };
    salidaJSON.textContent = JSON.stringify(pedido, null, 2);
}

✅ script.js correcto JavaScript

// Paso 1
fetch("grupos.xml")
    .then(obtenerTexto)
    .then(parsearXML)
    .then(mostrarClasificacion);

// Paso 2
function obtenerTexto(response) {
    return response.text(); // ✅ .text() no .txt()
}

// Paso 3
function parsearXML(str) { // ✅ el parámetro se llama str
    let parser = new DOMParser();
    return parser.parseFromString(str, "text/xml"); // ✅ str, no structuredClone
}

// Paso 4
function mostrarClasificacion(xmlDoc) {
    let equipos = xmlDoc.getElementsByTagName("equipo");
    let lista = "";
    for (let i = 0; i < equipos.length; i++) { // ✅ empieza en 0
        let nombre = equipos[i].querySelector("nombre").textContent;
        let grupo = equipos[i].querySelector("grupo").textContent; // ✅ singular
        let confederacion = equipos[i].querySelector("confederacion").textContent;

        // PASO 5
        lista += `
            ${grupo}
            ${nombre}
            ${confederacion}
        `; // ✅ dentro del bucle con +=
    }
    document.getElementById("equipos").innerHTML = lista;
}

Clasificación ✅

fetch("clasificacion_modif.xml")
    .then(obtenerTexto) // primero: convierte la respuesta en texto
    .then(parsearXML) // segundo: convierte el texto en un documento XML
    .then(mostrarClasificacion) // tercero: muestra los datos en el HTML

// PASO 2: Convierte la respuesta HTTP en texto plano
function obtenerTexto(response) { // abre
    return response.text();
} // cierra

// PASO 3: Convierte el string XML en un documento que JS puede leer
function parsearXML(str) { // abre
    let parser = new DOMParser();
    return parser.parseFromString(str, "text/xml");
} // cierra

// PASO 4: Recorre el XML y construye el HTML
function mostrarClasificacion(xmlDoc) { // abre
    // Busca todos los elementos  dentro del XML
    let equipos = xmlDoc.getElementsByTagName("equipo");
    let lista = "";
    for (let i = 0; i < equipos.length; i++) {
        // Para cada equipo, busca sus etiquetas hijas
        let nombre = equipos[i].querySelector("nombre").textContent;
        let ciudad = equipos[i].querySelector("ciudad").textContent;
        let puntos = equipos[i].querySelector("puntos").textContent;
        // Construye un  con esos datos y lo añade al string
        lista += `
            ${i + 1}º
            ${nombre} - ${ciudad}
            ${puntos} pts
        `;
    }
    // Mete todos los  dentro del