1

var a = document.querySelector('#shirina'),
  b = document.querySelector('#dlinna'),
  c = document.querySelector('#vysota'),
  a1 = document.querySelector('#cloned_dveri'),
  b1 = document.querySelector('#shirina_dveri_1'),
  c1 = document.querySelector('#vysota_dveri_1'),
  a2 = document.querySelector('#cloned_okna'),
  b2 = document.querySelector('#shirina_okna_1'),
  c2 = document.querySelector('#vysota_okna_1'),
  a3 = document.querySelector('#glubina'),
  b3 = document.querySelector('#vysota_otkosa'),
  perimetr = document.querySelector('#perimetr'),
  obiem = document.querySelector('#obiem'),
  ploschad = document.querySelector('#ploschad');

$('#a1').data('counter', 1).click(function() {
  var counter = $(this).data('counter');
  $(this).data('counter', counter + 1);
  a1.value = ($(this).data('counter'));

  $('<input type="text" size="10" class="numb">').attr({
    name: 'b1_' + (a1.value),
    id: 'shirina_dveri_' + (a1.value)
  }).insertBefore($('#shirina_dveri_1'));


  $('<input type="text" size="10" class="numb">').attr({
    name: 'c1_' + (a1.value),
    id: 'vysota_dveri_' + (a1.value)
  }).insertBefore($('#vysota_dveri_1'));

});

$('#a2').data('counter', 1).click(function() {
  var counter = $(this).data('counter');
  $(this).data('counter', counter + 1);
  a2.value = ($(this).data('counter'));

  $('<input type="text" size="10" class="numb">').attr({
    name: 'b2_' + (a1.value),
    id: 'shirina_okna_' + (a2.value)
  }).insertBefore($('#shirina_okna_1'));
  $('<input type="text" size="10" class="numb">').attr({
    id: 'vysota_okna_' + (a2.value),
    name: 'c2_' + (a1.value)
  }).insertBefore($('#vysota_okna_1'));
});

$('.numb').on('change', function() {
  console.log(this.value); // this или e.target – указание на элемент, на котором произошло событие
});

$('#btn').click(function() {

  if (a1.value != 0) {
    perimetr.value = 2 * (parseInt(a.value) + parseInt(b.value)) - (b1.value * a1.value);
  } else {
    perimetr.value = 2 * (parseInt(a.value) + parseInt(b.value));
  }
  ploschad.value = (a.value * b.value);
  obiem.value = Math.round((perimetr.value * c.value) - (b1.value * c1.value) + (b2.value * c2.value));
});
html,
body {
  background: #F2F3F4;
  -webkit-app-region: drag;
  user-select: none;
}

.btn {
  margin: 2%;
  display: inline-block;
  font-family: Monotype Corsiva;
  font-size: 15px;
  font-weight: bold;
  color: rgb(68, 68, 68);
  text-decoration: none;
  padding: .2em 1.2em;
  outline: none;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 2px;
  background: #F2F3F4 linear-gradient(#f4f4f4, #f1f1f1);
  transition: all .218s ease 0s;
}

.btn:hover {
  color: rgb(24, 24, 24);
  border: 1px solid rgb(198, 198, 198);
  background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.btn:active {
  color: rgb(51, 51, 51);
  border: 1px solid rgb(204, 204, 204);
  background: rgb(238, 238, 238) linear-gradient(rgb(238, 238, 238), rgb(224, 224, 224));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
}

.clone {
  margin-right: 1%;
  outline: none;
  text-decoration: none;
  padding: .2em 1.2em;
  font-weight: bold;
  font-family: Monotype Corsiva;
  border-radius: 2px;
  color: rgb(68, 68, 68);
  border: 1px solid rgba(0, 0, 0, .1);
  background: #F2F3F4 linear-gradient(#f4f4f4, #f1f1f1);
}

.clone:hover {
  color: rgb(24, 24, 24);
  border: 1px solid rgb(198, 198, 198);
  background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.clone:active {
  color: rgb(51, 51, 51);
  border: 1px solid rgb(204, 204, 204);
  background: rgb(238, 238, 238) linear-gradient(rgb(238, 238, 238), rgb(224, 224, 224));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
}

.brd {
  background: #F2F3F4; /* Цвет фона веб-страницы */
  border-collapse: collapse; /* Убираем двойные линии между ячейками */
  border: 3px solid #F2F3F4; /* рамка вокруг таблицы */
}

.td {
  border: 1px solid rgb(80, 80, 80); /* Параметры рамки */
}

.tr {
  border: 1px solid rgb(80, 80, 80); /* Параметры рамки */
}

.numb {
  border: 5px solid #F2F3F4; /* Параметры рамки */
  text-align: center; /* расположение текста */
  outline: none;
}

.raschet {
  border: 5px solid #F2F3F4; /* Параметры рамки */
  text-align: center; /* расположение текста */
}

.title {
  background: #C0C0C0; /* Цвет фона веб-страницы */
  font-family: Monotype Corsiva;
  font-size: 15px;
}

.text {
  font-family: Monotype Corsiva;
  font-size: 13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<center>
  <table width="400" border="1" class="brd">
    <thead>
      <tr>
        <th class="title" colspan="3">Параметры помещения</th>
      </tr>
      <tr>
        <th class="text">ширина</th>
        <th class="text">длинна</th>
        <th class="text">высота</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center">
        <td><input type="text" size="10" class="numb" id="shirina"></td>
        <td><input type="text" size="10" class="numb" id="dlinna"></td>
        <td><input type="text" size="10" class="numb" id="vysota"></td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th class="title" colspan="3">Двери</th>
      </tr>
      <tr>
        <th class="text">количество</th>
        <th class="text">ширина</th>
        <th class="text">высота</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center">
        <td>
          <table>
            <button type="button" class="clone" id="a1">Добавить</button>
            <input type="text" size="5" class="numb" id="cloned_dveri" readonly></table>
        </td>
        <td><input type="text" size="10" class="numb" name="b1" id="shirina_dveri_1" save()></td>
        <td><input type="text" size="10" class="numb" name="c1" id="vysota_dveri_1"></td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th class="title" colspan="3">Окна</th>
      </tr>
      <tr align="center">
        <th class="text">количество</th>
        <th class="text">ширина</th>
        <th class="text">высота</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center">
        <td>
          <table>
            <button type="button" class="clone" id="a2">Добавить</button>
            <input type="text" size="5" class="numb" id="cloned_okna" readonly></table>
        </td>
        <td><input type="text" size="10" class="numb" name="b2" id="shirina_okna_1"></td>
        <td><input type="text" size="10" class="numb" name="c2" id="vysota_okna_1"></td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th class="title" width="130" rowspan="1">Откосы</th>
        <th class="text">глубина</th>
        <th class="text">высота</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center">
        <td colspan="1"></td>
        <td><input type="text" size="10" class="numb" id="glubina"></td>
        <td><input type="text" size="10" class="numb" id="vysota_otkosa"></td>
      </tr>
    </tbody>
  </table>
  <div align="center" colspan="3">
    <button type="button" class="btn" id="btn">Произвести расчёт</button></div>
  <table width="400" border="2" class="brd">
    <thead>
      <tr>
        <th class="title" width="130">Периметр</th>
        <th class="title" width="130">Площадь стен</th>
        <th class="title" width="130">Площадь по полу</th>
      </tr>
    </thead>
    <tfoot>
      <tr align="center">
        <td>=<input type="text" size="7" class="raschet" id="perimetr" readonly>м2</td>
        <td>=<input type="text" size="7" class="raschet" id="obiem" readonly>м2</td>
        <td>=<input type="text" size="7" class="raschet" id="ploschad" readonly>м2</td>
      </tr>
    </tfoot>
  </table>
</center>

1
  • Исправил демонстрацию кода. 28 июл 2017 в 5:52

2 ответа 2

1

измените

$('.numb').on('change', function() { });

на

$('body').on('change', '.numb', function() { });
5
  • А возможно как-то прописать чтобы реакция была моментальной (вывод данных в console.log), а не после того как нажал на следующий input?
    – COdek
    28 июл 2017 в 5:58
  • попробуйте использовать keyup вместо change 28 июл 2017 в 6:00
  • И, спасибо. Сработало, как и задумывал. Долго ломал голову почему change() не срабатывает. Ни как не предполагал, что нужно ставить на глобальном уровне (если правильно выразился). Я совсем новичок в этом деле.
    – COdek
    28 июл 2017 в 6:02
  • Да, keyup() сработал. Еще раз спасибо. Может подскажите, а если это приложение запустить на мобильном устройстве, keyup() так же сработает?
    – COdek
    28 июл 2017 в 6:04
  • на мобильном тоже должно работать. 28 июл 2017 в 7:06
0

Вот так все работает, надо вставить обработчик change() в .click(function().

var a = document.querySelector('#shirina'),
  b = document.querySelector('#dlinna'),
  c = document.querySelector('#vysota'),
  a1 = document.querySelector('#cloned_dveri'),
  b1 = document.querySelector('#shirina_dveri_1'),
  c1 = document.querySelector('#vysota_dveri_1'),
  a2 = document.querySelector('#cloned_okna'),
  b2 = document.querySelector('#shirina_okna_1'),
  c2 = document.querySelector('#vysota_okna_1'),
  a3 = document.querySelector('#glubina'),
  b3 = document.querySelector('#vysota_otkosa'),
  perimetr = document.querySelector('#perimetr'),
  obiem = document.querySelector('#obiem'),
  ploschad = document.querySelector('#ploschad');

$('#a1').data('counter', 1).click(function() {
  var counter = $(this).data('counter');
  $(this).data('counter', counter + 1);
  a1.value = ($(this).data('counter'));

  $('<input type="text" size="10" class="numb">').attr({
    name: 'b1_' + (a1.value),
    id: 'shirina_dveri_' + (a1.value)
  }).insertBefore($('#shirina_dveri_1'));


  $('<input type="text" size="10" class="numb">').attr({
    name: 'c1_' + (a1.value),
    id: 'vysota_dveri_' + (a1.value)
  }).insertBefore($('#vysota_dveri_1'));

  $('.numb').on('change', function() {
  console.log(this.value); // this или e.target – указание на элемент, на котором произошло событие
});
});

$('#a2').data('counter', 1).click(function() {
  var counter = $(this).data('counter');
  $(this).data('counter', counter + 1);
  a2.value = ($(this).data('counter'));

  $('<input type="text" size="10" class="numb">').attr({
    name: 'b2_' + (a1.value),
    id: 'shirina_okna_' + (a2.value)
  }).insertBefore($('#shirina_okna_1'));
  $('<input type="text" size="10" class="numb">').attr({
    id: 'vysota_okna_' + (a2.value),
    name: 'c2_' + (a1.value)
  }).insertBefore($('#vysota_okna_1'));
  
  $('.numb').on('change', function() {
  console.log(this.value); // this или e.target – указание на элемент, на котором произошло событие
});
});

$('.numb').on('change', function() {
  console.log(this.value); // this или e.target – указание на элемент, на котором произошло событие
});

$('#btn').click(function() {

  if (a1.value != 0) {
    perimetr.value = 2 * (parseInt(a.value) + parseInt(b.value)) - (b1.value * a1.value);
  } else {
    perimetr.value = 2 * (parseInt(a.value) + parseInt(b.value));
  }
  ploschad.value = (a.value * b.value);
  obiem.value = Math.round((perimetr.value * c.value) - (b1.value * c1.value) + (b2.value * c2.value));
});
html,
body {
  background: #F2F3F4;
  -webkit-app-region: drag;
  user-select: none;
}

.btn {
  margin: 2%;
  display: inline-block;
  font-family: Monotype Corsiva;
  font-size: 15px;
  font-weight: bold;
  color: rgb(68, 68, 68);
  text-decoration: none;
  padding: .2em 1.2em;
  outline: none;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 2px;
  background: #F2F3F4 linear-gradient(#f4f4f4, #f1f1f1);
  transition: all .218s ease 0s;
}

.btn:hover {
  color: rgb(24, 24, 24);
  border: 1px solid rgb(198, 198, 198);
  background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.btn:active {
  color: rgb(51, 51, 51);
  border: 1px solid rgb(204, 204, 204);
  background: rgb(238, 238, 238) linear-gradient(rgb(238, 238, 238), rgb(224, 224, 224));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
}

.clone {
  margin-right: 1%;
  outline: none;
  text-decoration: none;
  padding: .2em 1.2em;
  font-weight: bold;
  font-family: Monotype Corsiva;
  border-radius: 2px;
  color: rgb(68, 68, 68);
  border: 1px solid rgba(0, 0, 0, .1);
  background: #F2F3F4 linear-gradient(#f4f4f4, #f1f1f1);
}

.clone:hover {
  color: rgb(24, 24, 24);
  border: 1px solid rgb(198, 198, 198);
  background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.clone:active {
  color: rgb(51, 51, 51);
  border: 1px solid rgb(204, 204, 204);
  background: rgb(238, 238, 238) linear-gradient(rgb(238, 238, 238), rgb(224, 224, 224));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
}

.brd {
  background: #F2F3F4; /* Цвет фона веб-страницы */
  border-collapse: collapse; /* Убираем двойные линии между ячейками */
  border: 3px solid #F2F3F4; /* рамка вокруг таблицы */
}

.td {
  border: 1px solid rgb(80, 80, 80); /* Параметры рамки */
}

.tr {
  border: 1px solid rgb(80, 80, 80); /* Параметры рамки */
}

.numb {
  border: 5px solid #F2F3F4; /* Параметры рамки */
  text-align: center; /* расположение текста */
  outline: none;
}

.raschet {
  border: 5px solid #F2F3F4; /* Параметры рамки */
  text-align: center; /* расположение текста */
}

.title {
  background: #C0C0C0; /* Цвет фона веб-страницы */
  font-family: Monotype Corsiva;
  font-size: 15px;
}

.text {
  font-family: Monotype Corsiva;
  font-size: 13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<center>
  <table width="400" border="1" class="brd">
    <thead>
      <tr>
        <th class="title" colspan="3">Параметры помещения</th>
      </tr>
      <tr>
        <th class="text">ширина</th>
        <th class="text">длинна</th>
        <th class="text">высота</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center">
        <td><input type="text" size="10" class="numb" id="shirina"></td>
        <td><input type="text" size="10" class="numb" id="dlinna"></td>
        <td><input type="text" size="10" class="numb" id="vysota"></td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th class="title" colspan="3">Двери</th>
      </tr>
      <tr>
        <th class="text">количество</th>
        <th class="text">ширина</th>
        <th class="text">высота</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center">
        <td>
          <table>
            <button type="button" class="clone" id="a1">Добавить</button>
            <input type="text" size="5" class="numb" id="cloned_dveri" readonly></table>
        </td>
        <td><input type="text" size="10" class="numb" name="b1" id="shirina_dveri_1" save()></td>
        <td><input type="text" size="10" class="numb" name="c1" id="vysota_dveri_1"></td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th class="title" colspan="3">Окна</th>
      </tr>
      <tr align="center">
        <th class="text">количество</th>
        <th class="text">ширина</th>
        <th class="text">высота</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center">
        <td>
          <table>
            <button type="button" class="clone" id="a2">Добавить</button>
            <input type="text" size="5" class="numb" id="cloned_okna" readonly></table>
        </td>
        <td><input type="text" size="10" class="numb" name="b2" id="shirina_okna_1"></td>
        <td><input type="text" size="10" class="numb" name="c2" id="vysota_okna_1"></td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th class="title" width="130" rowspan="1">Откосы</th>
        <th class="text">глубина</th>
        <th class="text">высота</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center">
        <td colspan="1"></td>
        <td><input type="text" size="10" class="numb" id="glubina"></td>
        <td><input type="text" size="10" class="numb" id="vysota_otkosa"></td>
      </tr>
    </tbody>
  </table>
  <div align="center" colspan="3">
    <button type="button" class="btn" id="btn">Произвести расчёт</button></div>
  <table width="400" border="2" class="brd">
    <thead>
      <tr>
        <th class="title" width="130">Периметр</th>
        <th class="title" width="130">Площадь стен</th>
        <th class="title" width="130">Площадь по полу</th>
      </tr>
    </thead>
    <tfoot>
      <tr align="center">
        <td>=<input type="text" size="7" class="raschet" id="perimetr" readonly>м2</td>
        <td>=<input type="text" size="7" class="raschet" id="obiem" readonly>м2</td>
        <td>=<input type="text" size="7" class="raschet" id="ploschad" readonly>м2</td>
      </tr>
    </tfoot>
  </table>
</center>

1
  • Немного не мой вариант. Мне нужно до основного click() <button type="button" class="btn" id="btn">Произвести расчёт</button> посчитать входящие. Или Вы имеете ввиду создать поверх?
    – COdek
    28 июл 2017 в 6:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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