Блог

Главная - Вопросы по программированию - Динамически создаваемый раскрывающийся список, выдающий ошибку при вызове метода

Динамически создаваемый раскрывающийся список, выдающий ошибку при вызове метода

#javascript #html #jquery

Вопрос:

Это мой код, поэтому в основном по нажатию кнопки я хочу вызвать этот метод addpoc (), который создает блок полей ввода и раскрывающийся список. Я хочу вызвать метод showmail() при выборе раскрывающегося списка, но он выдает ошибку. Как я могу это исправить ?

   function addpoc() { 
                let el;
                el  = '<div class="clearfix"><div class="name"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="'  showMail()  '"><option value="workmail" selected>Work email </option><option value="personalmail">Personal Email</option></select></div><div id="two" style="display: none;"><input type="email" name="email" placeholder="Work email"></div><div id="three" style="display: none;"><input type="email" name="email" placeholder="Personal email"></div></div>'

                $('#addelement').append(el);
            }
            
            
              function showMail() {
                let selecteop = document.getElementById("contact method");
                if (selecteop.value == "workmail") {

                    $("#two").show();
                    $("#three").hide();
                }
                else {
                    $("#three").show();
                    $("#two").hide();
                }
            } 
  <div>
                <div id="addelement"></div>
                <button id="addbtn" onclick="addpoc()">Add another point of contact</button>
           
            </div>

Ответ №1:

проблема заключалась в el = '<div cla ... том, что вы вызывали showMail функцию до того, как весь элемент, вставляемый в dom, selecteop еще не был создан.

  function addpoc() {
                let el;
                el  = '<div class="clearfix"><div class="name"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="showMail()"><option value="workmail" selected>Work email </option><option value="personalmail">Personal Email</option></select></div><div id="two" style="display: none;"><input type="email" name="email" placeholder="Work email"></div><div id="three" style="display: none;"><input type="email" name="email" placeholder="Personal email"></div></div>'

                $('#addelement').append(el);
            }

            function showMail() {
                let selecteop = document.getElementById("contact method");
                if (selecteop.value == "workmail") {

                    $("#two").show();
                    $("#three").hide();
                } else {
                    $("#three").show();
                    $("#two").hide();
                }
            } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
      <div id="addelement"></div>
      <button id="addbtn" onclick="addpoc()">Add another point of contact</button>  
 </div>

Комментарии:

1. но он не отображает поле ввода после первого раза при выборе раскрывающегося списка личная/рабочая почта

Ответ №2:

Просто измените свою function addpoc() функцию, как показано ниже. Вместо вызова функции showMail() во время создания html просто передайте ссылку на функцию onChange, например onchange="' showMail '" , просто удалите фигурные скобки. Кроме того, инициализируйте el значение '' пусто. В противном случае, это всегда будет начинаться с undefined . Это решит все ваши проблемы.

 function addpoc() { 
    let el='';
    el  = '<div class="clearfix"><div class="name"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="'  showMail  '"><option value="workmail" selected>Work email </option><option value="personalmail">Personal Email</option></select></div><div id="two" style="display: none;"><input type="email" name="email" placeholder="Work email"></div><div id="three" style="display: none;"><input type="email" name="email" placeholder="Personal email"></div></div>'
    $('#addelement').append(el);
}
Метки: ,