Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.10.2015, 17:37
Интересующийся
Отправить личное сообщение для lolpops Посмотреть профиль Найти все сообщения от lolpops
 
Регистрация: 02.10.2015
Сообщений: 14

Сумма полей должна быть равна 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);
      });

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

Последний раз редактировалось lolpops, 02.10.2015 в 17:44.
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2015, 18:29
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 573

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>
Ответить с цитированием
  #3 (permalink)  
Старый 02.10.2015, 18:43
Интересующийся
Отправить личное сообщение для lolpops Посмотреть профиль Найти все сообщения от lolpops
 
Регистрация: 02.10.2015
Сообщений: 14

У меня ничего не происходит при первышении суммы 100...
Ответить с цитированием
  #4 (permalink)  
Старый 02.10.2015, 19:02
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 573

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

Сообщение от lolpops
Есть задача в списке инпутов проверить сумму всех полей. Необходимо чтобы если пользователь вводит цифры и сумма не равна 100 то поля подсвечивалась красным
Ответить с цитированием
  #5 (permalink)  
Старый 02.10.2015, 19:17
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

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

на
if (result > 100) {
	target.style.background = 'red';
}
Ответить с цитированием
  #6 (permalink)  
Старый 02.10.2015, 21:25
Интересующийся
Отправить личное сообщение для lolpops Посмотреть профиль Найти все сообщения от lolpops
 
Регистрация: 02.10.2015
Сообщений: 14

Decode Спасибо, но все равно не работает как нужно..если написать в сумме значения обратно = 100, то поля красными так и остаются..можете поправить?
Ответить с цитированием
  #7 (permalink)  
Старый 02.10.2015, 21:55
Интересующийся
Отправить личное сообщение для lolpops Посмотреть профиль Найти все сообщения от lolpops
 
Регистрация: 02.10.2015
Сообщений: 14

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, ноль эмоций.
Ответить с цитированием
  #8 (permalink)  
Старый 02.10.2015, 22:34
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

замени
target.style.background = 'white';

на
[].forEach.call(inpElems, function(item) {
     item.style.background = 'white';
});
Ответить с цитированием
  #9 (permalink)  
Старый 02.10.2015, 22:45
Интересующийся
Отправить личное сообщение для lolpops Посмотреть профиль Найти все сообщения от lolpops
 
Регистрация: 02.10.2015
Сообщений: 14

Сообщение от 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';
});

    }
 };


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

Последний раз редактировалось lolpops, 02.10.2015 в 22:54.
Ответить с цитированием
  #10 (permalink)  
Старый 02.10.2015, 23:18
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 573

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 не причем.

Последний раз редактировалось Decode, 03.10.2015 в 02:30.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с кодом. Поиск и вывод нужного значения Sav2907 Элементы интерфейса 30 17.09.2015 16:54
Проверка полей js. MorroWIndss Элементы интерфейса 1 16.05.2014 07:38
Умножение и сложение на 2. Должна же быть разница? Mrjoey Общие вопросы Javascript 8 10.10.2013 17:51
Какого вида должна быть json-строка? DenQ ExtJS 7 02.11.2010 22:49
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 18:40