Как к вызову функции по onclick добавить еще одно условие?
Дано: кнопка и некая функция, которая вызывается по нажатию этой кнопки. Вопрос: как к вызову функции по событию "прикрутить" радиокнопку?
<html> <body> <button id="but_id">click me</button> <input type=radio name='radiobutton' value="1" id="labeled_1" checked/> <input type=radio name='radiobutton' value="2" id="labeled_2"/> </body> <script> function myAlert() { alert("Функция вызвана"); } var stateRadio = document.getElementById('labeled_1').value; // состояние радиокнопки // радиокнопку надо "прикрутить" на условие вызова функции как-то так: <stateRadio==1> И <but_id.onclick> = myAlert; </script> </html> P.S. Не стреляйте в нуба - он пишет как умеет ) |
//радиокнопку надо "прикрутить" на условие вызова функции:
but_id.onclick = myAlert; labeled_1.onclick = myAlert; labeled_2.onclick = myAlert; |
Strongman,
Может быть, я недостаточно точно сформулировал свой вопрос. Мне надо, чтобы функция вызывалась только в случае, если радиокнопка в определенном состоянии И нажата кнопка. В Вашем случае реализовано по "ИЛИ". |
<button id="but_id">click me</button>
<input type=radio name='radiobutton' value="1" id="labeled_1" />
<input type=radio name='radiobutton' value="2" id="labeled_2" />
<script>
document.getElementById('but_id').onclick = function () {
!!document.querySelector('input[type=radio]:checked') && alert("Функция вызвана");
}
</script>
|
destus, спасибо.
А как сделать то же самое, но: а) используя не querySelector, а только id? б) чтобы решение имело вид <событие onclick кнопки> И <value радиокнопки==1> = вызов функции; |
Цитата:
<button id="but_id">click me</button>
<input type=radio name='radiobutton' value="1" id="labeled_1" />
<input type=radio name='radiobutton' value="2" id="labeled_2" />
<script>
document.getElementById('but_id').onclick = function () {
(!!(document.getElementById('labeled_1').checked || document.getElementById('labeled_2').checked)) && alert("Функция вызвана");
}
</script>
Цитата:
<button id="but_id">click me</button>
<input type=radio name='radiobutton' value="1" id="labeled_1" />
<input type=radio name='radiobutton' value="2" id="labeled_2" />
<script>
document.getElementById('but_id').onclick = function () {
var radio = document.getElementsByName('radiobutton');
if ([].some.call(radio, function (el) {
if (el.checked && +el.value === 1)
return true;
}))
alert("Функция вызвана");
}
</script>
|
destus, но у Вас радиокнопка проверяется в теле функции, а мне надо наоборот, снаружи:
<stateRadio==1> И <but_id.onclick> = myAlert; И обращаться к радиокнопке надо не по имени, а по id. |
but_id.onclick = function(){
labeled_1.checked && alert(1)
}
|
Цитата:
|
Цитата:
but_id.onclick = function(){
if(labeled_1.checked) myAlert();}
|
Если проверка на состояние радио-баттона принципиальна вне тела функции, то можно навешивать/удалять обработчик на кнопку в соответствии с активным радио-баттоном.
В теле функции в качестве проверки есть строка console.log('function is starting'); Когда первый радио-баттон неактивен, то обработчик события удаляется с кнопки и функция, разумеется, не срабатывает. В консоль ничего не выводится. Постановка задачи интересная. Почему нельзя проверить активность радио-баттона в теле функции и уже дальше плясать от этого?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="radio" name="rad" id="radio1" >
<input type="radio" name="rad" id="radio2">
<br>
<input type="button" value="go" id="btn">
<script>
var radio1 = document.getElementById('radio1');
var radio2 = document.getElementById('radio2')
var btn = document.getElementById('btn');
function myAlert(){
console.log('function is starting');
alert('hi!');
}
radio1.onchange = function(){
btn.addEventListener('click', myAlert);
}
radio2.onchange = function(){
btn.removeEventListener('click', myAlert);
}
</script>
</body>
</html>
|
Цитата:
Спасибо Вам за не менее интересное решение! ) |
| Часовой пояс GMT +3, время: 09:06. |