Как сократить JS код

Question

Подскажите, пожалуйста, как можно сократить приведенный ниже JS код. В примере 2 инпута, а если их будет 20, то такой способ записи очень большой.

document.getElementById("shirina").onblur = function() {
  if (shirina.value < 10) {
    error1();
    document.getElementById("shirina").value = "10";
  } else if (shirina.value > 24) {
    document.getElementById("shirina").value = "24";
    error1();
  }
}
document.getElementById("dlina").onblur = function() {
  if (dlina.value < 5) {
    error2();
    document.getElementById("dlina").value = "5";
  } else if (dlina.value > 7) {
    document.getElementById("dlina").value = "7";
    error2();
  }
}

function error1() {
  let p1 = document.createElement('p');
  p1.className = "erorr-m";
  p1.innerHTML = "Значение от 10 до 24";
  shirina.after(p1);
  setTimeout(function() {
    p1.remove();
  }, 3000);
}

function error2() {
  let p2 = document.createElement('p');
  p2.className = "erorr-m";
  p2.innerHTML = "Значение от 5 до 7";
  dlina.after(p2);
  setTimeout(function() {
    p2.remove();
  }, 3000);
}

.div {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
}

.erorr {
  border: solid 2px #e66565;
}

.erorr-m {
  margin-bottom: 10px;
  padding: 10px;
  color: #e66565;
  border-left: solid 2px #e66565;
  animation: 1s fadeIn;
}

<div class="div">
  <input name="shirina" type="number" min="10" max="24" id="shirina" placeholder="Ширина">
  <input name="dlina" type="number" min="5" max="7" id="dlina" placeholder="Длина">
</div>

Answer 1

Можно сделать словарь с параметрами и в цикле задать все обработчики. Функцию error сделать одну, но с параметрами.

d = {
  "shirina": {
    "min": 10,
    "max": 24
  },
  "dlina": {
    "min": 5,
    "max": 7
  }
}

Object.keys(d).forEach(k => {
  document.getElementById(k).onblur = function() {
    if (this.value < d[k]["min"]) {
      this.value = d[k]["min"]
      error(this, k);
    }
    if (this.value > d[k]["max"]) {
      this.value = d[k]["max"]
      error(this, k);
    }
  }
})

function error(el, k) {
  let p1 = document.createElement('p');
  p1.className = "erorr-m";
  p1.innerHTML = `Значение от ${d[k]["min"]} до ${d[k]["max"]}`;
  el.after(p1);
  setTimeout(function() {
    p1.remove();
  }, 3000);
}

.div {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
}

.erorr {
  border: solid 2px #e66565;
}

.erorr-m {
  margin-bottom: 10px;
  padding: 10px;
  color: #e66565;
  border-left: solid 2px #e66565;
  animation: 1s fadeIn;
}

<div class="div">
  <input name="shirina" type="number" min="10" max="24" id="shirina" placeholder="Ширина">
  <input name="dlina" type="number" min="5" max="7" id="dlina" placeholder="Длина">
</div>

Answer 2

в любой непонятной ситуации проксируй часто используемые методы с длинными именами

      var g = function(x){return document.getElementById(x)}

/*если надо взаимодействовать с множеством инпутов,
запихни их все в одну форму и обращайся к ним через неё*/

var form = document.getElementById('f');
console.log(f.a.value);

var abc = 'abcdef';
for(let i=0; f[abc[i]]; i++)
{console.log(f[abc[i]].value);}

form > *{display: list-item;}
form > *:invalid{background: pink;}

<form id='f'>
<input type='number' id='a' value='21'>
<input type='number' id='b' value='-1113'>
<input type='number' id='c' value='55'>
<input type='number' id='d' value='4'>
<input type='number' id='e' value='5333'>
<input type='number' id='f' value='-15'>
</form>
<p id='abc'></p>

Answer 3

Можно выбрать все input-ы и назначить каждому слушателя:

const inputs = document.querySelectorAll('div.div input[type="number"]');

inputs.forEach(input => {
  input.addEventListener('blur', () => {
    const value = +input.value;
    const [min, max] = [+input.min, +input.max];
    
    if (!(value < min || value > max)) return;

    input.value = Math.max(min, Math.min(value, max));
    showRangeError(input);
  })
})

function showRangeError(input) {
  const error = document.createElement('p');

  error.className = "erorr-m";
  error.innerHTML = `Значение от ${input.min} до ${input.max}`;

  input.after(error);

  setTimeout(() => error.remove(), 3000);
}

.div {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
}

.erorr {
  border: solid 2px #e66565;
}

.erorr-m {
  margin-bottom: 10px;
  padding: 10px;
  color: #e66565;
  border-left: solid 2px #e66565;
  animation: 1s fadeIn;
}

<div class="div">
  <input name="shirina" type="number" min="10" max="24" id="shirina" placeholder="Ширина">
  <input name="dlina" type="number" min="5" max="7" id="dlina" placeholder="Длина">
</div>

А можно навесить один слушатель на весь div деленирование событий. Но слушать будем не blur, а change:

const inputsDiv = document.querySelector('div.div');

inputsDiv.addEventListener('change', (e) => {
  const input = e.target;
  
  if (input.type !== "number") return;
  
  const value = +input.value;
  const [min, max] = [+input.min, +input.max];

  if (!(value < min || value > max)) return;

  input.value = Math.max(min, Math.min(value, max));
  showRangeError(input);
})

function showRangeError(input) {
  const error = document.createElement('p');

  error.className = "erorr-m";
  error.innerHTML = `Значение от ${input.min} до ${input.max}`;

  input.after(error);

  setTimeout(() => error.remove(), 3000);
}

.div {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
}

.erorr {
  border: solid 2px #e66565;
}

.erorr-m {
  margin-bottom: 10px;
  padding: 10px;
  color: #e66565;
  border-left: solid 2px #e66565;
  animation: 1s fadeIn;
}

<div class="div">
  <input name="shirina" type="number" min="10" max="24" id="shirina" placeholder="Ширина">
  <input name="dlina" type="number" min="5" max="7" id="dlina" placeholder="Длина">
</div>

БЛОГ НА HUSL

Как сократить JS код

Ответы (3 шт):