$("#who").on("keyup", function() {
var searchText = $(this).val().toLowerCase() || "___";
$("#poisk > div").each(function() {
var elem = $(this);
var words = elem.text().toLowerCase().split(' ');
if (words.find(function(word) { return word.indexOf(searchText) === 0; })) {
elem.removeClass("hidden");
} else {
elem.addClass("hidden");
}
});
});<div class="container">
<div id="begin" class="beginer">
<button id="apple-button">
<img class="apple" id="apple" src="img/apple.png" alt="apple">
</button>
<button id="shoe-button">
<img class="shoe" id="shoe" src="img/shoe.png" alt="shoe">
</button>
<button id="book-button">
<img class="book" id="book" src="img/book.png" alt="book">
</button>
<button id="purse-button">
<img class="purse" id="purse" src="img/purse.png" alt="purse">
</button>
<div class="bottom">
<div class="text">
<ul>
<li id="apple-indicator">Apple</li>
<li id="shoe-indicator">Shoe</li>
<li id="book-indicator">Book</li>
<li id="purse-indicator">Purse</li>
</ul>
</div>
</div>
</div>
</div>
<script>
var items = ['apple', 'shoe', 'book', 'purse'];
var foundItemsCounter = 0;
function check() {
if (foundItemsCounter === items.length) {
document.getElementById('begin').style.display = 'none';
}
}
items.forEach(function (item) {
document.getElementById(item + '-button').addEventListener('click', function () {
document.getElementById(item).style.display = 'none';
document.getElementById(item + '-indicator').style.textDecoration = 'line-through';
foundItemsCounter++;
check();
});
});
check();
</script>function impossibru() {
if (
document.getElementById('apple').style.display === 'none' &&
document.getElementById('shoe').style.display === 'none' &&
document.getElementById('book').style.display === 'none' &&
document.getElementById('purse').style.display === 'none'
) {
document.getElementById('begin').style.display = 'none';
}
}
document.getElementById('ap').onclick = function () {
document.getElementById('apple').style.display = 'none';
document.getElementById('one').style.textDecoration = 'line-through';
impossibru();
};
document.getElementById('sh').onclick = function () {
document.getElementById('shoe').style.display = 'none';
document.getElementById('two').style.textDecoration = 'line-through';
impossibru();
};
document.getElementById('bk').onclick = function () {
document.getElementById('book').style.display = 'none';
document.getElementById('three').style.textDecoration = 'line-through';
impossibru();
};
document.getElementById('pr').onclick = function () {
document.getElementById('purse').style.display = 'none';
document.getElementById('for').style.textDecoration = 'line-through';
impossibru();
};
impossibru();