function ready(fn) { if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") { fn(); } else { document.addEventListener("DOMContentLoaded", fn); } } ready(function() { hideSections(); var sections = document.querySelectorAll("section"); var nav = document.querySelectorAll("nav a"); sections[0].style.display = "block"; nav.forEach(function(item) { item.onclick = function(e) { e.preventDefault(); var target = e.target.href.split("#"); var id = target[target.length - 1]; hideSections(); document.querySelector("#" + id).style.display = "block"; }; }); var searchfield = document.querySelector("#search"); searchfield.addEventListener("keyup", function() { var buttons = document.querySelectorAll(".sound"); buttons.forEach(function(item) { item.style.display = "inline-block"; }); buttons.forEach(function(item) { var name = item.firstChild.innerHTML; if (name.toLowerCase().indexOf(searchfield.value.toLowerCase()) === -1) { item.style.display = "none"; } }); }); var reset = document.querySelector("#reset"); var sounds_nav = document.querySelector("#sounds-nav"); reset.addEventListener("click", resetSearch, false); sounds_nav.addEventListener("click", resetSearch, false); document.onkeydown = function(evt) { evt = evt || window.event; if (evt.keyCode == 27) { resetSearch(); } }; }); function resetSearch() { var searchfield = document.querySelector("#search"); var buttons = document.querySelectorAll(".sound"); searchfield.blur(); buttons.forEach(function(item) { item.style.display = "inline-block"; }); searchfield.value = ""; } function hideSections() { var sections = document.querySelectorAll("section"); sections.forEach(function(item, i) { item.style.display = "none"; }); } function ajaxRequest(filename){ var ajaxRequest; try{ ajaxRequest = new XMLHttpRequest(); var url = "play/" + filename; ajaxRequest.open("GET", url, true); ajaxRequest.send(null); }catch (e){ alert("Your browser broke!"); return false; } }