テキストフィールドがページに追加されないのはなぜですか？

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条件を使用して、選択したオプションが 'other'であるかどうかをテストします。そうであれば、新しく作成したテキストフィールドをページに追加します。

これまでこれまでは機能していません。これを試してデバッグするために、私は作業しようとしている要素をコンソールに記録しようとしました。私は、「未定義」と「ヌル」を印刷しているので、これがどのように機能するのか理解しているとは思わない。ここで

は私のJSです：

// TASK：あなたはユーザー発射される「変更」イベントをリッスンするイベントリスナーを設定する必要があり

'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

を形成するために、インタラクティビティを追加します。ドロップダウンメニューから選択します。また、if文の "basicSection"の代わりに "basicSelection"を参照しています。

'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 
}); 

あなたは「その他」に選択を変更、ユーザーを可能にする必要がことにも注意は、その後、戻って何か他のものにそれを変え、それを変更すると、「その他」再び、、あなたの関数であるためにそのでしょう現在の選択に必要でない場合は、テキスト入力を削除できる必要があります。

しかし、私はそれだけで、あなたの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