Uncaught TypeError: Cannot read property 'querySelectorAll' of null
пишет это, поля не подсвечиваются и ничего вообще не делает |
lolpops, у вас разметка значит другая.
|
<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> вот такая разметка, взял прямо с сайта..может ли не работать из за того что это див вложен еще в один и тп? ведь это не важно же.. |
lolpops, а ссылку на сайт можно?
|
Вопрос еще актуален! Оплачу на WMR кто предоставит рабочий вариант на Jquery по типу этого (с привязкой к div где находятся элементы), задача подсвечивать внутреннюю область инпутов например красным цветом (всех инпутов) и писать аккуратно как-то что "сумма должна быть = 100" дабы информировать юзера..
|
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>
|
Все работает! Сообщите в личку свой кошелек, отблагодарю:) и еще вопрос..если у меня 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,
<!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>
|
Спасибо! Скажите а событие change не реагирует на изменение полей сторонними средствами (я сделал простенький скрипт заполнения полей данными). Например юзер вводит данные в форму (ввел не правильно) и они подсветились красными, после этого жмет кнопку "заполнить" и все поля заполняются верными числами = однако подсветка красным так и продолжают быть активной (хотя должна пропасть)..как решить эту проблему?
|
lolpops, можно же при клике на эту кнопку "запомнить" повесить функцию, которая уберет у всех инпутов красный background и и заполнит поля верными числами.
|
| Часовой пояс GMT +3, время: 05:03. |