I can't seem to get this to work
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>
Expected: When I reload the html, I get to see the url value.
But the output class div is not being populated for some reason. What could be going wrong?
You aren't calling the function:
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>You need to call ySearch for it to run, so you need an event listener on the button, to handle the click:
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>