Форум

lolpops · #1 (**permalink**) 02.10.2015, 17:37

Здравствуйте! Есть задача в списке инпутов проверить сумму всех полей. Необходимо чтобы если пользователь вводит цифры и сумма не равна 100 то поля подсвечивалась красным например, подскажите как реализовать!
Код полей такой:

<div class="poisk2" align="right">
<u>Процент использования</u><br>
Закладки            <input type="number" name="check[0]" id="check-0" min="0" max="100" value="30"> %<br />
Yandex.ru           <input type="number" name="check[1]" id="check-1" min="0" max="100" value="40"> %<br />
Google.ru           <input type="number" name="check[2]" id="check-2" min="0" max="100" value="20"> %<br />
Nigma .ru           <input type="number" name="check[3]" id="check-3" min="0" max="100" value="10"> %<br />
Qip.ru              <input type="number" name="check[4]" id="check-4" min="0" max="100" value="0"> %<br />
Go.mail.ru          <input type="number" name="check[5]" id="check-5" min="0" max="100" value="0"> %<br />
Rambler.ru          <input type="number" name="check[6]" id="check-6" min="0" max="100" value="0"> %<br />
Google.com.ua       <input type="number" name="check[7]" id="check-7" min="0" max="100" value="0"> %<br />
Meta.ua             <input type="number" name="check[8]" id="check-8" min="0" max="100" value="0"> %<br />
Yandex.ua           <input type="number" name="check[9]" id="check-9" min="0" max="100" value="0"> %<br />
Bigmir.net          <input type="number" name="check[10]" id="check-10" min="0" max="100" value="0"> %<br />
Bing.com            <input type="number" name="check[11]" id="check-11" min="0" max="100" value="0"> %<br />
Yandex.com          <input type="number" name="check[12]" id="check-12" min="0" max="100" value="0"> %<br />
</div>

Пробовал так, но нужно привязаться к конкретному виду полей (т.к. есть и другие разновидности), + нужно как то задать стиль подсветки..

var s = 0;
      
      $(document).ready(function() {
	$.each($('input'), function(key, val) {
	  s = s + parseInt(val.value);
	});

	alert(s);
      });

Заранее спасибо.

Decode · #2 (**permalink**) 02.10.2015, 18:29

lolpops, так?

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <div class="poisk2" align="right">
    <u>Процент использования</u><br>
    Закладки <input type="number" name="check[0]" id="check-0" min="0" max="100" value="30"> %<br />
    Yandex.ru <input type="number" name="check[1]" id="check-1" min="0" max="100" value="40"> %<br />
    Google.ru <input type="number" name="check[2]" id="check-2" min="0" max="100" value="20"> %<br />
    Nigma.ru <input type="number" name="check[3]" id="check-3" min="0" max="100" value="10"> %<br />
    Qip.ru <input type="number" name="check[4]" id="check-4" min="0" max="100" value="0"> %<br />
    Go.mail.ru <input type="number" name="check[5]" id="check-5" min="0" max="100" value="0"> %<br />
    Rambler.ru <input type="number" name="check[6]" id="check-6" min="0" max="100" value="0"> %<br />
    Google.com.ua <input type="number" name="check[7]" id="check-7" min="0" max="100" value="0"> %<br />
    Meta.ua <input type="number" name="check[8]" id="check-8" min="0" max="100" value="0"> %<br />
    Yandex.ua <input type="number" name="check[9]" id="check-9" min="0" max="100" value="0"> %<br />
    Bigmir.net <input type="number" name="check[10]" id="check-10" min="0" max="100" value="0"> %<br />
    Bing.com<input type="number" name="check[11]" id="check-11" min="0" max="100" value="0"> %<br />
    Yandex.com <input type="number" name="check[12]" id="check-12" min="0" max="100" value="0"> %<br />
  </div>

  <script>
    var wrap = document.querySelector('.poisk2'),
        inpElems = wrap.querySelectorAll('input[type=number]');

    wrap.onchange = function(e) {
      var target = e.target;
      if (target.tagName.toLowerCase() != 'input') return;

      var result = [].reduce.call(inpElems, function(current, next) {
        return (+current.value || +current) + +next.value;
      });

      if (result <= 100) {
        target.style.background = 'red';
      }

    };
  </script>
</body>
</html>

lolpops · #3 (**permalink**) 02.10.2015, 18:43

У меня ничего не происходит при первышении суммы 100...

Decode · #4 (**permalink**) 02.10.2015, 19:02

Сообщение от lolpops

У меня ничего не происходит при первышении суммы 100...

И что должно происходить?

Сообщение от lolpops

Есть задача в списке инпутов проверить сумму всех полей. Необходимо чтобы если пользователь вводит цифры и сумма не равна 100 то поля подсвечивалась красным

Lemme · #5 (**permalink**) 02.10.2015, 19:17

Замени

if (result <= 100) {
	target.style.background = 'red';
}

на

if (result > 100) {
	target.style.background = 'red';
}

lolpops · #6 (**permalink**) 02.10.2015, 21:25

Decode Спасибо, но все равно не работает как нужно..если написать в сумме значения обратно = 100, то поля красными так и остаются..можете поправить?

lolpops · #7 (**permalink**) 02.10.2015, 21:55

var wrap = document.querySelector('.poisk2'),
   inpElems = wrap.querySelectorAll('input[type=number]');

    wrap.onchange = function(e) {
      var target = e.target;
      if (target.tagName.toLowerCase() != 'input') return;
 var result = [].reduce.call(inpElems, 
        function(current, next) {
        return (+current.value || +current) + +next.value;
      });
 
      if (result > 100) {
    target.style.background = 'red';
        alert('Сумма должна быть равна 100%');
}
   if (result == 100) {
    target.style.background = 'white';
    }
 };

Изменил так, но все равно остаются некоторые поля красными которые например начинал менять вручную..И скрипт не работает на моем сайте..пробовал отключать jquery, ноль эмоций.

Lemme · #8 (**permalink**) 02.10.2015, 22:34

замени

target.style.background = 'white';

на

[].forEach.call(inpElems, function(item) {
     item.style.background = 'white';
});

lolpops · #9 (**permalink**) 02.10.2015, 22:45

Сообщение от Lemme

замени

target.style.background = 'white';

на

[].forEach.call(inpElems, function(item) {
     item.style.background = 'white';
});

Получилось так:

var wrap = document.querySelector('.poisk2'),
   inpElems = wrap.querySelectorAll('input[type=number]');
 
    wrap.onchange = function(e) {
      var target = e.target;
      if (target.tagName.toLowerCase() != 'input') return;
 var result = [].reduce.call(inpElems,
        function(current, next) {
        return (+current.value || +current) + +next.value;
      });
  
      if (result > 100) {
    target.style.background = 'red';

}
   if (result == 100) {
    [].forEach.call(inpElems, function(item) {
     item.style.background = 'white';
});

    }
 };

не работает, если поиграться с кнопочками будет такая ситуация что они не станут белыми..

Decode · #10 (**permalink**) 02.10.2015, 23:18

lolpops, а вы можете нормально написать условие? Так?

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="poisk2" align="right">
        <u>Процент использования</u><br />
        Закладки <input type="number" name="check[0]" id="check-0" min="0" max="100" value="30"> %<br />
        Yandex.ru <input type="number" name="check[1]" id="check-1" min="0" max="100" value="40"> %<br />
        Google.ru <input type="number" name="check[2]" id="check-2" min="0" max="100" value="20"> %<br />
        Nigma.ru <input type="number" name="check[3]" id="check-3" min="0" max="100" value="10"> %<br />
        Qip.ru <input type="number" name="check[4]" id="check-4" min="0" max="100" value="0"> %<br />
        Go.mail.ru <input type="number" name="check[5]" id="check-5" min="0" max="100" value="0"> %<br />
        Rambler.ru <input type="number" name="check[6]" id="check-6" min="0" max="100" value="0"> %<br />
        Google.com.ua <input type="number" name="check[7]" id="check-7" min="0" max="100" value="0"> %<br />
        Meta.ua <input type="number" name="check[8]" id="check-8" min="0" max="100" value="0"> %<br />
        Yandex.ua <input type="number" name="check[9]" id="check-9" min="0" max="100" value="0"> %<br />
        Bigmir.net <input type="number" name="check[10]" id="check-10" min="0" max="100" value="0"> %<br />
        Bing.com<input type="number" name="check[11]" id="check-11" min="0" max="100" value="0"> %<br />
        Yandex.com <input type="number" name="check[12]" id="check-12" min="0" max="100" value="0"> %<br />
    </div>
    
    <script>
        var wrap = document.querySelector('.poisk2'),
            inpElems = wrap.querySelectorAll('input[type=number]');
    
        wrap.onchange = function(e) {
            var target = e.target, result = 0;
    
            if (target.tagName.toLowerCase() != 'input') return;
    
            for (var i = 0; i < inpElems.length; i++) {
                result += +inpElems[i].value;
            }
    
            if (result <= 100) {
                [].forEach.call(inpElems, function(item) {
                    item.style.background = '';
                });
            } else {
                target.style.background  = 'red';
            }
    
            !target.value && (target.value = 0);
        };
    </script>
</body>
</html>

Сообщение от lolpops

И скрипт не работает на моем сайте..пробовал отключать jquery, ноль эмоций.

Что консоль пишет? JQuery не причем.

Форум

Справочник

Discord чат

Курсы javascript