Почему мое текстовое поле не добавляется на страницу?

Question

Я работаю над интерактивностью простой HTML-формы.

В частности, есть окно выпадающего списка для ролей работы. Если выбрано «другое», тогда должно появиться текстовое поле, в котором пользователь должен быть более конкретным.

Я новичок и хочу сделать это без jQuery.

Вот отрывок из HTML Я работаю с:

<fieldset class="basic">   
     <legend>Basic Info</legend> 

     <label for="name">Name:</label> 
     <input type="text" id="name" name="user_name"> 

     <label for="mail">Email:</label> 
     <input type="email" id="mail" name="user_email"> 

     <label>Job Role</label> 
     <select id="title" name="user_title"> 
      <option value="full-stack js developer">Full Stack JavaScript Developer</option> 
      <option value="front-end developer">Front End Developer</option> 
      <option value="back-end developer">Back End Developer</option> 
      <option value="designer">Designer</option>   
      <option value="student">Student</option> 
      <option value="other">Other</option> 
     </select>   
     </fieldset> 

Моя интуиция подсказывает мне, чтобы сначала создать текстовое поле и добавить его атрибуты.

Затем я буду использовать условие if, чтобы проверить, является ли выбранная опция «другой». Если это так, я добавлю вновь созданное текстовое поле на страницу.

Это еще не работает. Чтобы попробовать и отладить это, я попытался запустить консоль с элементами, с которыми я пытаюсь работать. Я не думаю, что понимаю, как это работает, поскольку оно печатает «undefined» и «null».

Вот мой JS:

// ЗАДАЧА: Добавить интерактивность сформировать

'use strict'; 

// Hold DOM elements for easy access 
var pageBody = document.querySelector('body'); 
var jobRoleSelect = document.getElementById('title'); 
console.log(jobSelected); 
var jobSelected = jobRoleSelect.options[jobRoleSelect.selectedIndex].value; 
var basicSection = document.querySelector('basic'); 
console.log(basicSection); 


// Job Role section of the form. Reveal a text field when the "Other" option is selected from the "Job Role" drop down menu 
if(jobSelected === 'other') { 
    var otherText = document.createElement('input'); 
    // Add an text input field. Use the id of "other-title" 
    otherText.setAttribute('id', 'other-title'); 
    otherText.setAttribute('type', 'text'); 
    otherText.setAttribute('name', 'other_field'); 
    otherText.setAttribute('placeholder', 'Your Title'); 

    var otherLabel = document.createElement('label'); 
    otherLabel.setAttribute('for', 'other_field'); 
    otherLabel.innerHTML = 'other'; 

    basicSelection.appendChild(otherLabel); 
    basicSelection.appendChild(otherText); 
} 

Answer 1

Вам нужно настроить приемник событий, чтобы слушать для «изменения» событие, которое вызывается, когда пользователь делает выбор из выпадающего меню. Также вы ссылаетесь на «basicSelection» вместо «basicSection» в вашем операторе if.

'use strict'; 
 

 
var jobRoleSelect = document.getElementById('title'); 
 
var basicSection = document.getElementsByClassName('basic')[0]; 
 

 
document.getElementById("title").addEventListener("change", function(){ 
 
    var jobSelected = jobRoleSelect.options[jobRoleSelect.selectedIndex].value; 
 
    console.log(jobSelected); 
 
    
 
    if(jobSelected === 'other') { 
 
    var otherText = document.createElement('input'); 
 
    // Add an text input field. Use the id of "other-title" 
 
    
 
    otherText.setAttribute('id', 'other-title'); 
 
    otherText.setAttribute('type', 'text'); 
 
    otherText.setAttribute('name', 'other_field'); 
 
    otherText.setAttribute('placeholder', 'Your Title'); 
 
    
 
    var otherLabel = document.createElement('label'); 
 
    otherLabel.setAttribute('for', 'other_field'); 
 
    otherLabel.innerHTML = 'Other:'; 
 

 
    basicSection.appendChild(otherLabel); 
 
    basicSection.appendChild(otherText); 
 
    } 
 
});

<fieldset class="basic">   
 
     <legend>Basic Info</legend> 
 

 
     <label for="name">Name:</label> 
 
     <input type="text" id="name" name="user_name"> 
 

 
     <label for="mail">Email:</label> 
 
     <input type="email" id="mail" name="user_email"> 
 

 
     <label>Job Role</label> 
 
     <select id="title" name="user_title"> 
 
      <option value="full-stack js developer">Full Stack JavaScript Developer</option> 
 
      <option value="front-end developer">Front End Developer</option> 
 
      <option value="back-end developer">Back End Developer</option> 
 
      <option value="designer">Designer</option>   
 
      <option value="student">Student</option> 
 
      <option value="other">Other</option> 
 
     </select>   
 
     </fieldset>

Answer 2

Если JS вы показали включен в конце тела документа, то он будет работать один раз при первой загрузке страницы. Я предполагаю, что вы действительно хотите, чтобы он запускался в ответ на изменение пользователем того, что выбрано, и в этом случае вам нужно обернуть свой код в функцию и сделать это обработчиком событий для события change.

var jobRoleSelect = document.getElementById('title'); 
jobRoleSelect.addEventListener('change', function() { 
    // your other code here 
}); 

Заметим также, что вам нужно, чтобы позволить пользователю изменять выбор на «Other», а затем изменить его обратно к чему-то еще, то изменить его на «Other» снова, то есть ваша функция будет должны быть в состоянии удалить ввод текста, если это не требуется для текущего выбора.

Но я думаю, что это было бы намного проще просто включить текстовый элемент и метку в вашем HTML и скрыть и показать их по мере необходимости:

var jobRoleSelect = document.getElementById('title'); 
 

 
jobRoleSelect.addEventListener('click', function() { 
 
    var otherSelected = jobRoleSelect.value === 'other'; 
 
    var otherElements = document.querySelectorAll('.other'); 
 

 
    for (var i = 0; i < otherElements.length; i++) { 
 
    if (otherSelected) 
 
     otherElements[i].classList.remove('hidden'); 
 
    else 
 
     otherElements[i].classList.add('hidden'); 
 
    } 
 
});

label { 
 
    display: block; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<fieldset class="basic"> 
 
    <legend>Basic Info</legend> 
 

 
    <label for="name">Name:</label> 
 
    <input type="text" id="name" name="user_name"> 
 

 
    <label for="mail">Email:</label> 
 
    <input type="email" id="mail" name="user_email"> 
 

 
    <label>Job Role</label> 
 
    <select id="title" name="user_title"> 
 
    <option value="full-stack js developer">Full Stack JavaScript Developer</option> 
 
    <option value="front-end developer">Front End Developer</option> 
 
    <option value="back-end developer">Back End Developer</option> 
 
    <option value="designer">Designer</option> 
 
    <option value="student">Student</option> 
 
    <option value="other">Other</option> 
 
    </select> 
 
    <label class="other hidden" for="other-title">Other</label> 
 
    <input class="other hidden" type="text" id="other-title" name="other-field" placeholder='Your title'> 
 
</fieldset>

Я дал все (то есть оба) элементов, которые должны быть скрыты или показаны классом other, что означает, что мой код должен пересекать их. Вместо этого вы можете обернуть их в div и просто скрыть div.

Обратите внимание, что я сделал скрытие/показ через класс, который я добавляю или удаляю с помощью элементов '.classList.К сожалению, .classList не поддерживается в IE < = 9, но есть a polyfill, или, конечно же, вы можете просто установить style.display прямо или как угодно.

Answer 3

У вас так много ошибок в коде. Но я вычислил их и вышел с решением. Используйте этот

<fieldset class="basic">   
     <legend>Basic Info</legend> 

     <label for="name">Name:</label> 
     <input type="text" id="name" name="user_name"> 

     <label for="mail">Email:</label> 
     <input type="email" id="mail" name="user_email"> 

     <label>Job Role</label> 
     <select id="title" name="user_title"> 
      <option value="full-stack js developer">Full Stack JavaScript Developer</option> 
      <option value="front-end developer">Front End Developer</option> 
      <option value="back-end developer">Back End Developer</option> 
      <option value="designer">Designer</option>   
      <option value="student">Student</option> 
      <option value="other">Other</option> 
     </select>   
     </fieldset> 
     <script> 
'use strict'; 

// Hold DOM elements for easy access 
var pageBody = document.querySelector('body'); 
var jobRoleSelect = document.getElementById('title'); 
//console.log(jobSelected); 
var basicSelection = document.querySelector('.basic'); 
//console.log(basicSection); 

jobRoleSelect.onchange = function(){ 
    var jobSelected = jobRoleSelect.options[jobRoleSelect.selectedIndex].value; 
// Job Role section of the form. Reveal a text field when the "Other" option is selected from the "Job Role" drop down menu 
if(jobSelected == 'other') { 
    console.log('nice'); 
    var otherText = document.createElement('input'); 
    // Add an text input field. Use the id of "other-title" 
    otherText.setAttribute('id', 'other-title'); 
    otherText.setAttribute('type', 'text'); 
    otherText.setAttribute('name', 'other_field'); 
    otherText.setAttribute('placeholder', 'Your Title'); 

    var otherLabel = document.createElement('label'); 
    otherLabel.setAttribute('for', 'other_field'); 
    otherLabel.innerHTML = 'other'; 

    basicSelection.appendChild(otherLabel); 
    basicSelection.appendChild(otherText); 
} 
} 
</script> 

Здесь работа jsFiddle