mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
38 lines
932 B
HTML
38 lines
932 B
HTML
<html>
|
|
<style>
|
|
label,
|
|
button {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<label><input type="checkbox" />Ice cream</label>
|
|
<label><input type="checkbox" />Pizza</label>
|
|
<label><input type="checkbox" />Tacos</label>
|
|
<label><input type="checkbox" />Meatloaf</label>
|
|
<label><input type="checkbox" />Brocolli</label>
|
|
|
|
<button>Display Your Favorites</button>
|
|
|
|
<div class="favorites"></div>
|
|
</body>
|
|
|
|
<script>
|
|
function getFavs() {
|
|
let favList = [];
|
|
const inputs = document.querySelectorAll('input');
|
|
for (const input of inputs) {
|
|
if (input.checked === true) {
|
|
favList.push(input.parentNode.textContent);
|
|
}
|
|
}
|
|
document.querySelector('.favorites').textContent = favList.join(' ');
|
|
}
|
|
|
|
let button = document.querySelector('button');
|
|
|
|
button.addEventListener('click', getFavs);
|
|
</script>
|
|
</html>
|