Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Сумма полей должна быть равна 100, проверка (https://javascript.ru/forum/events/58652-summa-polejj-dolzhna-byt-ravna-100-proverka.html)

lolpops 02.10.2015 17:37
Сумма полей должна быть равна 100, проверка
 
Здравствуйте! Есть задача в списке инпутов проверить сумму всех полей. Необходимо чтобы если пользователь вводит цифры и сумма не равна 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 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 02.10.2015 18:43
У меня ничего не происходит при первышении суммы 100...

Decode 02.10.2015 19:02
Цитата:
Сообщение от lolpops
У меня ничего не происходит при первышении суммы 100...
И что должно происходить?

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

Lemme 02.10.2015 19:17
Замени
if (result <= 100) {
	target.style.background = 'red';
}

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

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

lolpops 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 02.10.2015 22:34
замени
target.style.background = 'white';

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

lolpops 02.10.2015 22:45
Цитата:
Сообщение от Lemme (Сообщение 390732)
замени
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 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 не причем.


Часовой пояс GMT +3, время: 16:39.
Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице