0

Не могу понять, в чем проблема. В консоли не отображается никаких ошибок, но в то же время данные в нужное поле не записываются - не происходит вообще ничего(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>

5
  • 1
    А для воспроизведения проблемы точно нужен весь этот код? На то чтобы разобраться в нём всём уйдёт слишком много времени
    – Regent
    13 окт 2018 в 16:00
  • @Regent сократил, спасибо за замечание! 13 окт 2018 в 16:06
  • Не проще ли присвоить этой кнопке id и обращаться к ней по id? 13 окт 2018 в 16:41
  • @НиколайБеляков тоже самое - никакого результата 13 окт 2018 в 17:22
  • Похоже у тебя закрывающий тег </div> потерялся 13 окт 2018 в 17:31

1 ответ 1

0
<input class="choose-item" type="text" id="items">

      </div>

     </div>
  <link rel="stylesheet" href="css/style.css">

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.