проблема в области видимости: function ограничивает область видимости.
Вот такой вариант рабочий:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ГГ</title>
<style>
#table {
width: 100px;
height: 300px;
}
</style>
</head>
<body>
<input id="searchProducts" type="text" value='Банан'>
<button id="searchButton">Жми</button>
<div id="table"></div>
<script>
window.onload =function(){
document.getElementById('searchButton').onclick = searchProducts;
}
var bananM = new Shop("Банан", "MARTIN", "12 100 тыс/кг");
var orangeM = new Shop("Апельсин","MARTIN","15 300 тыс/кг");
var cola2M = new Shop("Кока-кола","MARTIN", "13 500 тыс/2л");
var cola1M = new Shop("Кока-кола","MARTIN", "8 500 тыс/1л");
var MARTIN =[bananM,orangeM,cola1M,cola2M];
var bananBel = new Shop("Банан", "Белмаркет", "10 900 тыс/кг");
var orangeBel = new Shop("Апельсин","Белмаркет","6 300 тыс/кг");
var cola2Bel = new Shop("Кока-кола","Белмаркет", "14 500 тыс/2л");
var cola1Bel = new Shop("Кока-кола","Белмаркет", "10 500 тыс/1л");
var belMarket =[bananBel,orangeBel,cola2Bel,cola1Bel];
var bananRub = new Shop("Банан", "Рублёвский", "15 900 тыс/кг");
var orangeRub = new Shop("Апельсин","Рублёвский","8 300 тыс/кг");
var cola2Rub = new Shop("Кока-кола","Рублёвский", "10 100 тыс/2л");
var cola1Rub = new Shop("Кока-кола","Рублёвский", "8 800 тыс/1л");
var rublevskiy = [bananRub,orangeRub,cola2Rub,cola1Rub];
var shop = [MARTIN, belMarket,rublevskiy];
var searchProducts = function (){
var products = document.getElementById('searchProducts');
var productsValue = products.value;
shopProducts(productsValue);
console.log(productsValue);
}
function Shop(nameProduct,shop,price){
this.nameProduct = nameProduct;
this.shop = shop;
this.price = price;
}
function shopProducts(searchProduct){
for (var i = 0; i<shop.length;i++){
var choiseShop = shop[i];
var choiseElement =choiseShop[i];
if (choiseElement.nameProduct === searchProduct){
var table = document.getElementById("table");
table.innerHTML ="<table border='1px' style='border-collapse: collapse;'><tr><th>Название продукта</th> <th> Магазин</th> <th> Цена</th></tr>" +
+ "<tr><td>"+ choiseElement.nameProduct + "</td> <td>"+choiseElement.shop + "</td> <td> "+ choiseElement.price +"</td></tr></table>";
}
if(choiseElement.nameProduct !== searchProduct){console.log('Ничего не найдено.')};
}
}
</script>
</body>
</html>