Как вызвать функцию по событию кнопки и состоянию радиокнопки

@dry fig · Регистрация: 25.03.2016

Author24 — интернет-сервис помощи студентам

Дано: кнопка, радиокнопка и функция, которая должна вызываться строго по двум условиям (по И):
- по нажатию кнопки
- и при определенном положении радиокнопки
При этом к кнопке и радиокнопке желательно обращаться по id.

Код:

HTML5

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

Javascript

<script>    
 
  function myAlert() {
    alert("Функция вызвана");
  }
 
  // читаем состояние радиокнопки
  var stateRadio = document.getElementById('labeled_1').value;
 
  // ХОЧЕТСЯ ПОЛУЧИТЬ ЧТО-ТО ПОДОБНОЕ (хотя и понятно, что работать так оно не будет):
  if ((stateRadio==2) && (but_id.onclick))
  {
    myAlert;
  } 
</script>

@Padonak · 25.03.2016, 19:51

можно попробовать так:

PHP/HTML

<!doctype html>
<html>
<head>
<title>XYZ</title>
<meta charset="utf-8" />
<script>    
function myAlert(){
// читаем состояние радиокнопки
var stateRadio = document.querySelector('#ff').radiobutton.value;
 
// ХОЧЕТСЯ ПОЛУЧИТЬ ЧТО-ТО ПОДОБНОЕ (хотя и понятно, что работать так оно не будет):
if((stateRadio==2) && (event.target.id=='but_id')){
alert("Функция вызвана");
}
}
onload=function(){
document.getElementById('but_id').onclick=myAlert;
} 
</script> 
</head>
<body>  
<button id="but_id">click me</button>
<form id="ff">
<input type="radio" name="radiobutton" value="1" checked />
<input type="radio" name="radiobutton" value="2" />
</form>
</body>
</html>

@dry fig · 26.03.2016, 13:34 **[ТС]**

Всем ответившим большое спасибо. Хорошо, что мир не без добрых людей )

Добавлено через 13 часов 23 минуты
Не пойму, почему в строке 9 состояние радиокнопки считывается, а в моем случае - нет:

Javascript

1
2

var stateRadio = document.querySelector('#ff').radiobutton.value; // исходный вариант, работает
var stateRadio = document.getElementById('labeled_1').value;      // альтернативный вариант, не работает

Добавлено через 1 час 21 минуту

Сообщение от dry fig

Не пойму, почему в строке 9 состояние радиокнопки считывается, а в моем случае - нет

Разобрался. Дело было не в бабине ) Так что проехали.

Привожу окончательный работающий вариант кода:

HTML5

  <head>
    <meta charset="utf-8" />
    <title>Вызов функции по событию кнопки и состоянию радиокнопки</title>
  </head>
  <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>

Javascript

  <script>
    but_id.onclick = myAlert;
    function myAlert(){
      if (labeled_1.checked) {
        alert("Функция вызвана");
      }
    }       
  </script>

Еще раз всем спасибо за поддержку.

@Padonak · 26.03.2016, 13:59

можно и без использования формы сделать:

PHP/HTML

<!doctype html>
<html>
<head>
<title>XYZ</title>
<meta charset="utf-8" />
<script>    
onload=function(){
document.getElementById('but_id').onclick=function(){
var val=document.querySelector('[name=radiobutton]:checked').value;
if((val==2) && (event.target.id=='but_id')){
alert("Функция вызвана");
}
}
} 
</script> 
</head>
<body>  
<button id="but_id">click me</button>
<input type="radio" name="radiobutton" value="1" checked />
<input type="radio" name="radiobutton" value="2" />
</body>
</html>

Радиокнопка - это переключатель, его value - это value выделенного кружочка. А

Javascript

1	var stateRadio = document.getElementById('labeled_1').value

всегда будет равно "1", независимо от того, какой кружок в данный момент отмечен.

@dry fig · 26.03.2016, 15:27 **[ТС]**

Сообщение от Padonak

можно и без использования формы сделать

У меня так и сделано.
А с радиокнопкой - да, все именно так, как Вы написали, это я уже понял.

Пока все же не могу решить свою задачу "красиво". Дано: двухпозиционная радиокнопка и две таблицы. Таблицу 1 можно редактировать, установив радиокнопку в положение 1, таблицу 2 - установив радиокнопку в положение 2.
Код по первоначальному замыслу должен иметь следующий вид:

HTML5

<button id='id_button'>Редактировать</button>
<input type='radio' name='radiobutton' value='1' id='labeled_1' checked />
<input type='radio' name='radiobutton' value='2' id='labeled_2'/>
<table id='id_table1'>
<table id='id_table2'>

Javascript

    function editTable(id_table) {
      if ((labeled_2.checked) && (id_button.onclick)) {
        // код, редактирующий таблицу (в нашем случае таблицу 2, т.к. выбрано второе состояние радиокнопки)
      }
    }

Однако одним-единственным параметром id_table обойтись не получается в силу того, что радиокнопку можно прочитать только в теле функции. Поэтому приходится добавлять второй параметр id_table, вот так:

Javascript

    function editTable(id_table_1, id_table_2) {
      if (labeled_2.checked) {
      // код, редактирующий таблицу;
      }
    }

А это, согласитесь, некрасиво. Это же функция, как-никак.

@Padonak · 26.03.2016, 15:41

А если просто написать ф-цию редактирования таблиц, выбирая таблицу как-то так:

Javascript

function editTab(n){
var currentTab=document.getElementById('id_table'+n);
// тут ваш код, редактирующий таблицу
}
 
onload=function(){
document.getElementById('id_button').onclick=function(){
editTab(document.querySelector('[name=radiobutton]:checked').value);
}
}

@dry fig · 26.03.2016, 17:07 **[ТС]**

Сообщение от Padonak

А если просто написать ф-цию редактирования таблиц, выбирая таблицу как-то так:

Вариант интересен с точки зрения находчивости - т.е. мы id_table передаем в функцию не напрямую, а в виде строки, "склеивая" 'id_table' и значение радиокнопки.
Но неужели нет более простого способа? Как-то не хочется терять надежду, знаете ли )

@Padonak · 26.03.2016, 17:12

А что такого сложного вот в данном коде? Куда еще проще?

PHP/HTML

<!doctype html>
<html>
<head>
<title>XYZ</title>
<meta charset="utf-8" />
<style>
button, input[name="radiobutton"]{
display:inline;
cursor:pointer;
margin:10px;
}
hr{
width:50%;
margin:10px;
}
table{
min-width:30%;
border:1px dashed #000;
border-radius:5px;
background-color:transparent;
margin:20px;
}
table td{
border:1px solid #ccc;
border-radius:5px;
text-align:center;
}
.active{
border:2px dashed Crimson;
background-color:#f8f8ff;
}
</style>
<script>
function _(id){return document.getElementById(id);}
 
function editTab(n){
var i=1;
    while(_('id_table'+i)!=undefined){
    _('id_table'+i).className='';
    i++;
    }
    /* "Редактирование" */
_('id_table'+n).className='active';
}
 
onload=function(){
_('id_button').onclick=function(){
editTab(document.querySelector('[name=radiobutton]:checked').value);
}
}
</script> 
</head>
<body>  
<center>
<button id="id_button">Редактировать</button>
<input type="radio" name="radiobutton" value="1" checked />
<input type="radio" name="radiobutton" value="2" />
 
<hr />
 
<table id="id_table1" cellspacing="3" cellpadding="3">
<tr><td colspan="3">id_table1</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
 
<table id="id_table2" cellspacing="3" cellpadding="3">
<tr><td colspan="3">id_table2</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</center>
</body>
</html>

@dry fig · 26.03.2016, 17:41 **[ТС]**

Сообщение от Padonak

А что такого сложного вот в данном коде? Куда еще проще?

Ну, например, новичку вроде меня нужно немного поразбираться )
Говоря о простом, я вот что имел в виду: я думал, что конструкция типа <событие нажатия кнопки> && <проверка состояния радиокнопки> = <вызов функции> возможна.
Большое спасибо за Ваш код.

@Padonak · 26.03.2016, 19:32

<событие нажатия кнопки> && <проверка состояния радиокнопки> = <вызов функции>

Javascript

/* по окончании процесса загрузки окна(документа) */
onload=function(){
/* при событии клика(нажатия) кнопки */
_('id_button').onclick=function(){
/* выполнить ф-цию editTab(в зависимости от состояния кнопки) */
editTab(document.querySelector('[name=radiobutton]:checked').value);
}
}

все происходит именно так :-)

@dry fig · 26.03.2016, 22:02 **[ТС]**

Не хочу напрашиваться (но тем не менее, хе-хе, невольно это делаю)... Мнэ-э-э, а можете сделать вариант без нижнего подчеркивания? Просто интересно, как оно будет выглядеть.

@Padonak · 27.03.2016, 10:01

НП просто для экономии телодвижений и удобочитаемости кода было использовано

Javascript

function editTab(n){
var i=1;
    while(document.getElementById('id_table'+i)!=undefined){
    document.getElementById('id_table'+i).className='';
    i++;
    }
    /* "Редактирование" */
document.getElementById('id_table'+n).className='active';
}
 
onload=function(){
document.getElementById('id_button').onclick=function(){
editTab(document.querySelector('[name=radiobutton]:checked').value);
}
}

@dry fig 0 / 0 / 0 Регистрация: 25.03.2016 Сообщений: 8
	26.03.2016, 22:02 [ТС]	11
	Не хочу напрашиваться (но тем не менее, хе-хе, невольно это делаю)... Мнэ-э-э, а можете сделать вариант без нижнего подчеркивания? Просто интересно, как оно будет выглядеть. 0

@dry fig 0 / 0 / 0 Регистрация: 25.03.2016 Сообщений: 8
	26.03.2016, 17:07 [ТС]	7
	Сообщение от Padonak А если просто написать ф-цию редактирования таблиц, выбирая таблицу как-то так: Вариант интересен с точки зрения находчивости - т.е. мы id_table передаем в функцию не напрямую, а в виде строки, "склеивая" 'id_table' и значение радиокнопки. Но неужели нет более простого способа? Как-то не хочется терять надежду, знаете ли ) 0

@dry fig 0 / 0 / 0 Регистрация: 25.03.2016 Сообщений: 8
	26.03.2016, 17:41 [ТС]	9
	Сообщение от Padonak А что такого сложного вот в данном коде? Куда еще проще? Ну, например, новичку вроде меня нужно немного поразбираться ) Говоря о простом, я вот что имел в виду: я думал, что конструкция типа <событие нажатия кнопки> && <проверка состояния радиокнопки> = <вызов функции> возможна. Большое спасибо за Ваш код. 0