Javascript-форум - Как сделать выбор из радиокнопок?

Создала форму сделала обработчик и при выборе городов ничего не происходит (так и должно быть), если нажать другой город то создастся поле, где предложат пользователю назвать свой город. Я сделала форму, и несколько дополнительных полей только вот при щелчке на форму и полям срабатывает обработчик onclick. Как сделать обработчик только, для radio кнопок?
Вот весь код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript">
       $(document).ready(function(e){
           
            document.mainForm.onclick = function(){
                  var radVal = document.mainForm.city.value;
                  var text = "";
                  if(radVal == "-1")
                  {
                      text = "Другой город";
                      alert(text);
                      document.getElementById("pole").innerHTML = '<input type="text" name="other_city">';
                  }
                  else
                  {
                     text = "Город из списка";
                     alert(text);
                     document.getElementById("pole").innerHTML = "";
                     
                  }
                  
              }     

       });
  </script>
</head>
<body>
<p>
<form id="mainForm" name="mainForm">

<input type="text" name="test" value=""><br>
                       <input type="radio" checked="checked" name="city" value="1">
                       <label>
                         Москва
                       </label>
                       <input type="radio" name="city" value="2">
                       <label>
                         Воронеж
                       </label>
                       <input type="radio" name="city" value="3">
                       <label>
                         Новгород
                       </label>
                     
                       <input type="radio" name="city" value="4">
                       <label>
                         Волгоград
                       </label>
                        <input type="radio" name="city" value="-1">
                            <label>
                                Другой
                            </label>
                   <div id="pole"></div>
            </p>
</form>
</body>
</html>

<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <script type="text/javascript"> document.addEventListener( "DOMContentLoaded" , function() { const on = (parent, event, selector, fn) => parent.addEventListener(event, ({target}) => { if(target = target.closest(selector)) fn(target) }) const fn = ({value}) => { const html = value == -1 ? '<input type="text" name="other_city">' : ''; const text = value == -1 ? 'Другой город' : 'Город из списка'; document.getElementById("pole").innerHTML = html; alert(text); }; on(document.querySelector("#mainForm"), "click", '[name="city"]', fn); }); </script> </head> <body> <form id="mainForm" name="mainForm"> <input type="text" name="test" value=""><br> <label><input type="radio" checked="checked" class="city_check" name="city" id="city1" value="1"> Москва</label> <label><input type="radio" class="city_check" name="city" id="city2" value="2"> Воронеж</label> <label><input type="radio" class="city_check" name="city" id="city3" value="3"> Новгород</label> <label><input type="radio" class="city_check" name="city" id="city4" value="4"> Волгоград</label> <label><input type="radio" class="city_check" name="city" id="city_1" value="-1"> Другой</label> <div id="pole"></div> </form> </body> </html>