Parece que no puedo hacer que esto funcione
app.js :
const api = 'xxxxxxxx'; function ySearch(e) { const url = 'https://www.googleapis.com/youtube/v3/search/? part=snippet&key='+api+'&q=test&maxResults=20'; document.querySelector('.output').textContent = url; } html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> <button>Search</button> <div class="output"></div> <script src="app.js"></script> </body> </html> Esperado: cuando vuelvo a cargar el html , puedo ver el valor de la url . Pero la clase de salida div no se completa por alguna razón. ¿Qué podría estar saliendo mal?
No estás llamando a la función:
const api = 'xxxxxxxx'; function ySearch(e) { const url = 'https://www.googleapis.com/youtube/v3/search/?part=snippet&key=' + api + '&q=test&maxResults=20'; document.querySelector('.output').textContent = url; } const button = document.querySelector('button'); button.addEventListener('click', ySearch) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> <button>Search</button> <div class="output"></div> </body> </html>Debe llamar a ySearch para que se ejecute, por lo que necesita un detector de eventos en el botón para manejar el clic:
function ySearch(e) { const url = 'https://...'; document.querySelector('.output').textContent = url; } // add event listener to button document.getElementById('searchButton').addEventListener('click', ySearch) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="app.js" async defer></script> </head> <body> <input type="text"> <button id="searchButton" >Search</button> <div class="output"></div> </body> </html>