Задать вопрос
NiceIce
@NiceIce
lamer
javascript

Как сделать обнуление value инпутов средством указания границ каких именно нужно обнулить?

Здравствуйте подскажите как реализовать обнуление value инпутов указав какие именно нужно обнулить, к примеру:

Есть 4 инпута для указания границ обнуления и 7 инпутов с value, мне нужно обнулить с 1 по 4 и с 6 по 7.
Я указываю в инпуте na1 1 в инпуте na2 4, na3 6 и na4
7, и в итоге value остается только в инпуте 5.
код
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" placeholder="na1" size="1">
<input type="text" placeholder="na2" size="1">
  <input type="text" placeholder="na3" size="1">
<input type="text" placeholder="na4" size="1">
  <br>
    <br>
<input type="text" placeholder="1" size="1">
  <input type="text" placeholder="2" size="1">
  <input type="text" placeholder="3" size="1">
  <input type="text" placeholder="4" size="1">
  <input type="text" placeholder="5" size="1">
  <input type="text" placeholder="6" size="1">
  <input type="text" placeholder="7" size="1">
</body>
</html>

Код навел для примера так как у меня около 5 к инпутов(не спрашивайте зачем :) ).
Да еще можно возле каждего инпута поставить чекбокс и указывать 1 и последний и все что в диапазоне будет обнулено, НО как реализовать несколько отрывков обнулений?)
Спасибо!
  • Вопрос задан
  • 484 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
boratsagdiev
@boratsagdiev
Вот так.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" class="field-na na-1" placeholder="na1" size="1" value="1">
  <input type="text" class="field-na na-2" placeholder="na2" size="1" value="4">
  <input type="text" class="field-na na-3" placeholder="na3" size="1" value="6">
  <input type="text" class="field-na na-4" placeholder="na4" size="1" value="7">
  <button class="field-recalc">Пересчитать</button>
  <br>
  <br>
  <input type="text" placeholder="1" size="1" value="1" class="field-to-change">
  <input type="text" placeholder="2" size="1" value="1" class="field-to-change">
  <input type="text" placeholder="3" size="1" value="1" class="field-to-change">
  <input type="text" placeholder="4" size="1" value="1" class="field-to-change">
  <input type="text" placeholder="5" size="1" value="1" class="field-to-change">
  <input type="text" placeholder="6" size="1" value="1" class="field-to-change">
  <input type="text" placeholder="7" size="1" value="1" class="field-to-change">

  <script src="index.js"></script>
</body>
</html>


const calculateFields = () => {

  const getFieldValue = (className, idx) => {
    const value = document.querySelectorAll(className)[idx].value;
    return Number(value)
  }

  const fields = {
    na1: getFieldValue('.field-na', 0),
    na2: getFieldValue('.field-na', 1),
    na3: getFieldValue('.field-na', 2),
    na4: getFieldValue('.field-na', 3),
  }

  const countRange = (start, end) => {
    let range = [];

    for(let i = start; i <= end; i++) {
      range.push(i - 1)
    }

    return range
  }

  const firstRange = countRange(fields.na1, fields.na2);
  const secondRange = countRange(fields.na3, fields.na4);

  return Array.prototype.forEach.call(document.querySelectorAll('.field-to-change'), (elem, index)=>{
    if(firstRange.indexOf(index) > -1 || secondRange.indexOf(index) > -1) {
      elem.value = 0
    }
  })
}

document.querySelectorAll('.field-recalc')[0].addEventListener('click', () => {
  calculateFields()
})

// document.addEventListener('DOMContentLoaded', () => {
//   calculateFields();
// })


Если нужно пересчитать при загрузке страницы, то раскомментируйте код с event listener'ом для DOMContentLoaded и закомментируйте для клика.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
@vshvydky 
// тут собираешь свои 4 входных валуя
Array.prototype.forEach.call(document.querySelectorAll(selector), (elem, index)=>{
    // тут ифами сравниваешь свои 4 значения с index и elem.value меняешь. Вместо индекса можно добавить нумерацию в какой-нибудь атрибут
})
// selector это то по чему ты найдешь свои N инпутов
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать верстку двух страниц из фигмы
22 нояб. 2024, в 09:58
5000 руб./за проект
Доделать проект
22 нояб. 2024, в 09:57
3000 руб./за проект
Написать продающую и сео-оптимизированную структура для сайта
22 нояб. 2024, в 09:42
30000 руб./за проект
Ещё заказы