Не срабатывает eventListener

174
15 февраля 2019, 19:00

Не могу понять, в чем проблема. В консоли не отображается никаких ошибок, но в то же время данные в нужное поле не записываются - не происходит вообще ничего(open работает как надо, а вот button-goods - никак). В чем косяк?

let open = document.getElementById('open-btn'); 
 
let name_value = document.querySelector('.name-value'); 
 
 
let budget_value = document.querySelector('.budget-value'); 
 
let goods_value = document.querySelector('.goods-value'); 
 
let items_value = document.querySelector('.items-value'); 
 
let employers_value = document.querySelector('.employers-value'); 
 
 
let discount_value = document.querySelector('.discount-value'); 
 
let isopen_value = document.querySelector('.isopen-value'); 
 
let goods_item = document.getElementsByClassName('.goods-item'); 
 
let button_goods = document.getElementsByTagName('button')[1]; 
let button_employers = document.getElementsByTagName('button')[2]; 
let button_budget = document.getElementsByTagName('button')[3], 
 
  choose_item = document.querySelector('.choose-item'); 
time_value = document.querySelector('.time-value'); 
count_budget_value = document.querySelector('.count-budget-value'); 
hire_employers_item = document.querySelectorAll('.hire-employers-item'); 
 
let budget; 
 
let price; 
 
 
open.addEventListener('click', () => { 
  budget = prompt('Your budget?'); 
  while (isNaN(budget) || budget == '' || budget == null) { 
    budget = prompt('Your budget?', ''); 
  } 
  budget_value.textContent = budget; 
  name_value.textContent = prompt('Name of your shop?', '').toUpperCase(); 
 
}); 
 
button_goods.addEventListener('click', () => { 
  for (let i = 0; i < goods_item.length; i++) { 
    let a = goods_item[i].value; 
    if ((typeof(a)) === "string" && (typeof(a)) != null && a.length < 50) { 
      console.log('Все верно!'); 
      mainList.shopGoods[i] = a; 
      goods_value.textContent = mainList.shopGoods; 
    } else { 
      i = i - 1; 
    } 
  } 
 
});
* { 
  box-sizing: border-box; 
} 
 
body { 
  height: 670px; 
  background: url(../img/bg.jpg) center no-repeat; 
  background-size: cover; 
  word-break: break-all; 
} 
 
.open { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center; 
  background-color: rgba(255, 255, 255, 0.9); 
  border: 1px solid #000; 
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5); 
  width: 350px; 
  height: 100px; 
  margin: 0 auto; 
  margin-top: 20px; 
} 
 
.open:before { 
  content: ""; 
  display: block; 
  position: absolute; 
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5); 
  width: 8px; 
  height: 20px; 
  background-color: #000; 
  margin: 0 auto; 
  -webkit-transform: translateY(-60px); 
  -ms-transform: translateY(-60px); 
  transform: translateY(-60px); 
} 
 
.open-btn { 
  border: none; 
  outline: none; 
  color: #fff; 
  font-weight: 900; 
  cursor: pointer; 
  background-color: #5356ad; 
  box-shadow: 0px 0px 10px rgba(83, 86, 173, 0.5); 
  border-radius: 8px; 
  border: 1px solid #fff; 
  width: 200px; 
  height: 50px; 
} 
 
.main { 
  width: 100%; 
  margin-top: 30px; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-justify-content: space-around; 
  -ms-flex-pack: distribute; 
  justify-content: space-around; 
} 
 
.main-info { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-flex-wrap: wrap; 
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap; 
  -webkit-box-pack: justify; 
  -webkit-justify-content: space-between; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  -webkit-box-align: start; 
  -webkit-align-items: flex-start; 
  -ms-flex-align: start; 
  align-items: flex-start; 
  -webkit-align-content: flex-start; 
  -ms-flex-line-pack: start; 
  align-content: flex-start; 
  width: 550px; 
  min-height: 400px; 
  padding: 20px; 
  background-color: #fff; 
  border: 1px solid black; 
} 
 
.main-info .name, 
.main-info .name-value, 
.main-info .budget, 
.main-info .budget-value, 
.main-info .goods, 
.main-info .goods-value, 
.main-info .items, 
.main-info .items-value, 
.main-info .employers, 
.main-info .employers-value, 
.main-info .discount, 
.main-info .discount-value, 
.main-info .isopen, 
.main-info .isopen-value { 
  width: 48%; 
  margin-top: 10px; 
  min-height: 40px; 
  padding: 10px; 
  border: 1px solid rgba(0, 0, 0, 0.8); 
} 
 
.main-info .isopen-value, 
.main-info .discount-value { 
  background-color: red; 
} 
 
.main-functions { 
  width: 550px; 
  min-height: 500px; 
  padding: 20px; 
  background-color: #fff; 
  border: 1px solid black; 
} 
 
.main-functions .choose-goods, 
.main-functions .choose-items, 
.main-functions .time, 
.main-functions .count-budget, 
.main-functions .hire-employers { 
  margin-top: 5px; 
  text-align: center; 
  font-size: 20px; 
} 
 
.main-functions .goods-item { 
  display: inline-block; 
  margin: 0 auto; 
  margin-top: 10px; 
  padding-left: 10px; 
  width: 49%; 
  height: 25px; 
} 
 
.main-functions .goods-item-btn { 
  display: block; 
  margin: 0 auto; 
  margin-top: 10px; 
} 
 
.main-functions .choose-item, 
.main-functions .time-value, 
.main-functions .count-budget-value { 
  display: block; 
  margin: 0 auto; 
  margin-top: 10px; 
  padding-left: 10px; 
  width: 70%; 
  height: 25px; 
} 
 
.main-functions .time-value { 
  width: 30%; 
} 
 
.main-functions .count-budget-value { 
  width: 30%; 
  display: inline-block; 
  margin-left: 25%; 
} 
 
.main-functions .hire-employers-item { 
  display: block; 
  margin: 0 auto; 
  margin-top: 10px; 
  padding-left: 10px; 
  width: 49%; 
  height: 25px; 
} 
 
.main-functions .hire-employers-btn { 
  display: block; 
  margin: 0 auto; 
  margin-top: 10px; 
}
<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Java Script</title> 
</head> 
 
<body> 
 
  <div class="open"> 
    <button class="open-btn" id="open-btn">Открыть магазин</button> 
  </div> 
  <div class="main"> 
    <div class="main-info"> 
      <div class="name">Название магазина: </div> 
      <div class="name-value"></div> 
 
      <div class="budget">Бюджет магазина: </div> 
      <div class="budget-value"></div> 
 
      <div class="goods">Категории товаров: </div> 
      <div class="goods-value"></div> 
 
      <div class="items">Наименования товаров: </div> 
      <div class="items-value"></div> 
 
      <div class="employers">Сотрудники: </div> 
      <div class="employers-value"></div> 
 
      <div class="discount">Дисконтная система </div> 
      <div class="discount-value"></div> 
 
      <div class="isopen">Открыто </div> 
      <div class="isopen-value"></div> 
    </div> 
    <div class="main-functions"> 
      <div class="choose-goods">Введите категории товаров</div> 
      <input class="goods-item" type="text" id="goods_1"> 
      <input class="goods-item" type="text" id="goods_2"> 
      <input class="goods-item" type="text" id="goods_3"> 
      <input class="goods-item" type="text" id="goods_4"> 
      <button class="goods-item-btn">Утвердить</button> 
 
      <div class="choose-items">Введите продукты через запятую</div> 
      <input class="choose-item" type="text" id="items"> 
 
  </div> 
 
 
  <link rel="stylesheet" href="css/style.css"> 
 
  <script src="js/script.js"> 
  </script> 
</body> 
 
</html>

Answer 1
<input class="choose-item" type="text" id="items">
      </div>
     </div>
  <link rel="stylesheet" href="css/style.css">

Тег потерялся

READ ALSO
Анимация градиента

Анимация градиента

Первый раз с таким столкнуласьМне нужна анимация градиента, что бы была еле заметной

165
Сериализация в xml (Уникальность полей)

Сериализация в xml (Уникальность полей)

Делаю сериализациюВсе получается

131
Window на весь экран

Window на весь экран

У Window указал 2 свойства: ShowActivated="False" и WindowStateMaximized

151