Estoy tratando de crear un pequeño programa de JavaScript que permita a los usuarios ingresar una consulta de búsqueda y luego encontrar los resultados de esta consulta y mostrarlos a través de una solicitud asincrónica. A continuación puede encontrar lo que probé hasta ahora, pero no muestra nada más que un cuadro de búsqueda. ¿Podría por favor ayudar con la implementación? ¡Gracias por adelantado!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Podcasts</title> <script> // TODO 1: Ensure that the main part of the script is executed when the DOM is ready. document.addEventListener('DOMContentLoaded', function (event) { }) // TODO 2: Set the constant input to the input field from the HTML body const input = document.getElementById("input"); const outputDiv = document.getElementById("output"); // Attach the event handler to the input // Event handler function for when the user types // TODO 3: Register the inputHandler function as event listener on the input function InputHandler() { input.addEventListener('submit', function (event) { // TODO 4: // While the user types in the field, the event listener inputHandler // shall create an asynchronous request to access the API to search // for soundtracks by title. async function asynchronousRequest () { const id = await document.getElementsByName('input'); return document.getElementById(id); } }); } function responseHandler (soundtracks) { outputDiv.innerHTML = ''; const tb1 = document.createElement('table'); // TODO 5: Process the result soundtracks.forEach(soundtrack => { let tr = document.createElement('tr'); let td1 = document.createElement('td'); tr.append(td1); let td2 = document.createElement('td'); tr.append(td2); let td3 = document.createElement('td'); tr.append(td3); }) const tr = tb1.insertRow(); const td1 = tr.insertCell(); // TODO 6: Create an additional audio element and set source to soundtracks' audioSrc. const audio = document.getElementById("audioSrc").src; outputDiv.appendChild(tb1); outputDiv.appendChild(td1); outputDiv.appendChild(audio); } </script> </head> <body> <input type="text" class="user-input"> <div id="output"></div> </body> </html>