Javascript.RU

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

Uncaught TypeError: Cannot read property 'querySelectorAll' of null
пишет это, поля не подсвечиваются и ничего вообще не делает
Ответить с цитированием
  #12 (permalink)  
Старый 05.10.2015, 00:24
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

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

<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>


вот такая разметка, взял прямо с сайта..может ли не работать из за того что это див вложен еще в один и тп? ведь это не важно же..
Ответить с цитированием
  #14 (permalink)  
Старый 06.10.2015, 17:37
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

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

Вопрос еще актуален! Оплачу на WMR кто предоставит рабочий вариант на Jquery по типу этого (с привязкой к div где находятся элементы), задача подсвечивать внутреннюю область инпутов например красным цветом (всех инпутов) и писать аккуратно как-то что "сумма должна быть = 100" дабы информировать юзера..
Ответить с цитированием
  #16 (permalink)  
Старый 10.10.2015, 03:07
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

lolpops,
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        dl {
            margin-bottom:50px;
        }

        dl dt {
            background:#5f9be3;
            color:#fff;
            float:left;
            font-weight:bold;
            margin-right:10px;
            padding:5px;
            width:100px;
        }

        dl dd {
            margin:2px 0;
            padding:5px 0;
        }

        .warning {
            display: none;
            border-bottom: 2px dotted red;
        }
    </style>
</head>
<body>
    <div class="search">
        <h3>Процен использования</h3>
        <dl>
            <dt><label for="check-0">Закладки</label></dt>
            <dd><input type="number" name="check[0]" id="check-0" min="0" max="100" value="30" /></dd>

            <dt><label for="check-1">Yandex.ru</label></dt>
            <dd><input type="number" name="check[1]" id="check-1" min="0" max="100" value="40" /></dd>

            <dt><label for="check-2">Google.ru</label></dt>
            <dd><input type="number" name="check[2]" id="check-2" min="0" max="100" value="20" /></dd>

            <dt><label for="check-3">Nigma.ru</label></dt>
            <dd><input type="number" name="check[3]" id="check-3" min="0" max="100" value="10" /></dd>

            <dt><label for="check-4">Qip.ru</label></dt>
            <dd><input type="number" name="check[4]" id="check-4" min="0" max="100" value="0" /></dd>

            <dt><label for="check-5">Go.mail.ru</label></dt>
            <dd><input type="number" name="check[5]" id="check-5" min="0" max="100" value="0" /></dd>

            <dt><label for="check-6">Rambler.ru</label></dt>
            <dd><input type="number" name="check[2]" id="check-6" min="0" max="100" value="0" /></dd>

            <dt><label for="check-7">Google.com.ua</label></dt>
            <dd><input type="number" name="check[1]" id="check-7" min="0" max="100" value="0" /></dd>

            <dt><label for="check-8">Meta.ua</label></dt>
            <dd><input type="number" name="check[2]" id="check-8" min="0" max="100" value="0" /></dd>

            <dt><label for="check-9">Yandex.ua</label></dt>
            <dd><input type="number" name="check[2]" id="check-9" min="0" max="100" value="0" /></dd>

            <dt><label for="check-10">Bigmir.net</label></dt>
            <dd><input type="number" name="check[2]" id="check-10" min="0" max="100" value="0" /></dd>

            <dt><label for="check-11">Bing.com</label></dt>
            <dd><input type="number" name="check[2]" id="check-11" min="0" max="100" value="0" /></dd>

            <dt><label for="check-12">Yandex.com</label></dt>
            <dd><input type="number" name="check[2]" id="check-12" min="0" max="100" value="0" /></dd>
        </dl>
        <span class="warning">Сумма должна быть равной 100!</span>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <script>
        $('.search').on('change', 'input', function() {
            var inpElems = $('.search input'),
                result = 0,
                warning = $('.warning');

            inpElems.each(function() {
                result += +$(this).val();
            });

            if (result <= 100) {
                inpElems.each(function() {
                   $(this).css('background', '');
                   warning.hide();
                });
            } else {
                $(this).css('background', 'red');
                warning.show();
            }

            !$(this).val() && $(this).val(0);
        });
    </script>
</body>
</html>
Ответить с цитированием
  #17 (permalink)  
Старый 10.10.2015, 10:16
Интересующийся
Отправить личное сообщение для lolpops Посмотреть профиль Найти все сообщения от lolpops
 
Регистрация: 02.10.2015
Сообщений: 14

Все работает! Сообщите в личку свой кошелек, отблагодарю и еще вопрос..если у меня 2 пары таких полей ( я обернул в другой див search2 и скопировал скрипт еще раз..это обязательно делать или можно как то короче записать просто добавив изменения в новый.
Т.е. у меня получилось
<div class="search">
инпуты
</div>

<div class="search2">
инпуты
</div>

Все работает, но может сам скрипт можно не копировать еще раз..т.е получилось два скрипта
<script>
        $('.search').on('change', 'input', function() {
            var inpElems = $('.search input'),
                result = 0,
                warning = $('.warning');

            inpElems.each(function() {
                result += +$(this).val();
            });

            if (result == 100) {
                inpElems.each(function() {
                   $(this).css('background', '');
                   warning.hide();
                });
            } else {
                $(this).css('background', 'red');
                warning.show();
            }

            !$(this).val() && $(this).val(0);
        });

    </script>

     <script>
        $('.search2').on('change', 'input', function() {
            var inpElems2 = $('.search2 input'),
                result2 = 0,
                warning2 = $('.warning2');

            inpElems2.each(function() {
                result2 += +$(this).val();
            });

            if (result2 == 100) {
                inpElems2.each(function() {
                   $(this).css('background', '');
                   warning2.hide();
                });
            } else {
                $(this).css('background', 'red');
                warning2.show();
            }

            !$(this).val() && $(this).val(0);
        });

    </script>

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

lolpops,
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        dl {
            margin-bottom:50px;
        }

        dl dt {
            background:#5f9be3;
            color:#fff;
            float:left;
            font-weight:bold;
            margin-right:10px;
            padding:5px;
            width:100px;
        }

        dl dd {
            margin:2px 0;
            padding:5px 0;
        }

        .warning {
            display: none;
            border-bottom: 2px dotted red;
        }
    </style>
</head>
<body>
    <div class="search">
        <h3>Процен использования</h3>
        <dl>
            <dt><label for="check-0">Закладки</label></dt>
            <dd><input type="number" name="check[0]" id="check-0" min="0" max="100" value="30" /></dd>

            <dt><label for="check-1">Yandex.ru</label></dt>
            <dd><input type="number" name="check[1]" id="check-1" min="0" max="100" value="40" /></dd>

            <dt><label for="check-2">Google.ru</label></dt>
            <dd><input type="number" name="check[2]" id="check-2" min="0" max="100" value="20" /></dd>

            <dt><label for="check-3">Nigma.ru</label></dt>
            <dd><input type="number" name="check[3]" id="check-3" min="0" max="100" value="10" /></dd>

            <dt><label for="check-4">Qip.ru</label></dt>
            <dd><input type="number" name="check[4]" id="check-4" min="0" max="100" value="0" /></dd>

            <dt><label for="check-5">Go.mail.ru</label></dt>
            <dd><input type="number" name="check[5]" id="check-5" min="0" max="100" value="0" /></dd>

            <dt><label for="check-6">Rambler.ru</label></dt>
            <dd><input type="number" name="check[6]" id="check-6" min="0" max="100" value="0" /></dd>

            <dt><label for="check-7">Google.com.ua</label></dt>
            <dd><input type="number" name="check[7]" id="check-7" min="0" max="100" value="0" /></dd>

            <dt><label for="check-8">Meta.ua</label></dt>
            <dd><input type="number" name="check[8]" id="check-8" min="0" max="100" value="0" /></dd>

            <dt><label for="check-9">Yandex.ua</label></dt>
            <dd><input type="number" name="check[9]" id="check-9" min="0" max="100" value="0" /></dd>

            <dt><label for="check-10">Bigmir.net</label></dt>
            <dd><input type="number" name="check[10]" id="check-10" min="0" max="100" value="0" /></dd>

            <dt><label for="check-11">Bing.com</label></dt>
            <dd><input type="number" name="check[11]" id="check-11" min="0" max="100" value="0" /></dd>

            <dt><label for="check-12">Yandex.com</label></dt>
            <dd><input type="number" name="check[12]" id="check-12" min="0" max="100" value="0" /></dd>
        </dl>
        <span class="warning">Сумма должна быть равной 100!</span>
    </div>

    <div class="search">
        <h3>Процен использования</h3>
        <dl>
            <dt><label for="check-13">Закладки</label></dt>
            <dd><input type="number" name="check[13]" id="check-13" min="0" max="100" value="30" /></dd>

            <dt><label for="check-14">Yandex.ru</label></dt>
            <dd><input type="number" name="check[14]" id="check-14" min="0" max="100" value="40" /></dd>

            <dt><label for="check-15">Google.ru</label></dt>
            <dd><input type="number" name="check[15]" id="check-15" min="0" max="100" value="20" /></dd>

            <dt><label for="check-16">Nigma.ru</label></dt>
            <dd><input type="number" name="check[16]" id="check-16" min="0" max="100" value="10" /></dd>

            <dt><label for="check-17">Qip.ru</label></dt>
            <dd><input type="number" name="check[4]" id="check-17" min="0" max="100" value="0" /></dd>
        </dl>
        <span class="warning">Сумма должна быть равной 100!</span>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <script>
        $('.search').on('change', 'input', function(event) {
            var parent = $(this).closest('.search'),
                inpElems = parent.find('input'),
                result = 0,
                warning = parent.children('.warning');

            inpElems.each(function() {
                result += +$(this).val();
            });

            if (result <= 100) {
                inpElems.each(function() {
                   $(this).css('background', '');
                   warning.hide();
                });
            } else {
                $(this).css('background', 'red');
                warning.show();
            }

            !$(this).val() && $(this).val(0);
        });
    </script>
</body>
</html>
Ответить с цитированием
  #19 (permalink)  
Старый 10.10.2015, 23:22
Интересующийся
Отправить личное сообщение для lolpops Посмотреть профиль Найти все сообщения от lolpops
 
Регистрация: 02.10.2015
Сообщений: 14

Спасибо! Скажите а событие change не реагирует на изменение полей сторонними средствами (я сделал простенький скрипт заполнения полей данными). Например юзер вводит данные в форму (ввел не правильно) и они подсветились красными, после этого жмет кнопку "заполнить" и все поля заполняются верными числами = однако подсветка красным так и продолжают быть активной (хотя должна пропасть)..как решить эту проблему?
Ответить с цитированием
  #20 (permalink)  
Старый 11.10.2015, 00:43
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

lolpops, можно же при клике на эту кнопку "запомнить" повесить функцию, которая уберет у всех инпутов красный background и и заполнит поля верными числами.
Ответить с цитированием
Ответ



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

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


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