Отладчик выдаёт ошибку . Не могу понять
Вообщем вопрос такой. Хочу, чтобы через кнопку поиск находило всю информацию о продуктах и выводила всё в таблице. Но отладчик выдаёт ошибку Uncaught ReferenceError: сhoiseElement is not defined shopProducts @ myJavaScript.js:51
searchProducts @ myJavaScript.js:7. И подчеркивает вот это место: + сhoiseElement.nameProduct + "</td> <td>"+сhoiseElement.shop + "</td> <td> "+ сhoiseElement.price +"</td></tr></table>" Код находится снизу. window.onload =function(){ document.getElementById('searchButton').onclick = searchProducts; } 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; } 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]; 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>"+ сhoiseElement.nameProduct + "</td> <td>"+сhoiseElement.shop + "</td> <td> "+ сhoiseElement.price +"</td></tr></table>"; } if(choiseElement.nameProduct !== searchProduct){console.log('Ничего не найдено.')}; } } |
проблема в области видимости: 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> |
Часовой пояс GMT +3, время: 11:33. |