Warum wird mein Textfeld nicht zur Seite hinzugefügt?

Question

Ich arbeite an der Interaktivität eines einfachen HTML-Formulars.

Insbesondere gibt es eine Dropdown-Auswahlbox für Jobrollen. Wenn "Andere" ausgewählt ist, sollte ein Textfeld angezeigt werden, in dem der Benutzer aufgefordert wird, genauer zu sein.

Ich bin ein Anfänger und möchte dies ohne jQuery tun.

Hier ist ein Ausschnitt aus dem HTML mit denen ich arbeite:

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

Meine Intuition sagt mir, dass es Attribute, zuerst das Textfeld zu erstellen und hinzuzufügen.

Ich werde dann eine if-Bedingung verwenden, um zu testen, ob die ausgewählte Option "andere" ist oder nicht. Wenn dies der Fall ist, füge ich das neu erstellte Textfeld an die Seite an.

Dies hat bisher nicht funktioniert. Um dies zu debuggen, habe ich versucht, die Elemente zu protokollieren, mit denen ich arbeiten möchte. Ich glaube nicht, dass ich verstehe, wie das funktioniert, da es "undefiniert" und "null" ausgibt.

Hier ist meine JS:

// AUFGABE: Interaktivität hinzufügen

'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

Sie müssen bilden einen Ereignis-Listener einzurichten für den „change“ -Ereignis zu hören, dass der Benutzer, wenn sie abgefeuert wird trifft eine Auswahl aus dem Dropdown-Menü. Außerdem verweisen Sie in Ihrer if-Anweisung auf "basicSelection" anstelle von "basicSection".

'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

Wenn der JS Sie gezeigt haben, ist am Ende des Dokuments Körper enthalten, dann wird es einmal, wenn die Seite geladen wird ausgeführt. Ich nehme an, was Sie eigentlich wollen, ist es als Antwort auf den Benutzer ausgeführt zu haben, was geändert wird, in diesem Fall müssen Sie Ihren Code in eine Funktion und machen Sie einen Event-Handler für das Ereignis change.

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

Beachten Sie auch, dass Sie für den Benutzer ermöglichen, müssen Sie die Auswahl zu ändern auf „Andere“, dann ist es sonst wieder zu etwas zu ändern, ändert es dann zu „Sonstiges“ wieder,, die Ihre Funktion ist, würde müssen in der Lage sein, die Texteingabe zu entfernen, wenn sie für die aktuelle Auswahl nicht benötigt werden.

Aber ich denke, es wäre viel einfacher sein, nur das Textelement und Etikett in Ihrem HTML enthält und verstecken und sie zeigt, wie nötig:

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>

Ich habe alles gegeben, (das ist beides) der Elemente, die versteckt oder in der other Klasse angezeigt werden müssen, was bedeutet, dass mein Code über sie hinwegschleifen muss. Du könntest sie stattdessen in ein div einpacken und einfach das div verstecken.

Beachten Sie, dass ich das Ausblenden/Anzeigen über eine Klasse durchgeführt habe, die ich über die Elemente '.classList' hinzufüge oder entferne.Leider wird .classList in IE < = 9 nicht unterstützt, aber es gibt a polyfill, oder natürlich können Sie einfach die style.display direkt oder was auch immer setzen.

Answer 3

Sie haben so viele Fehler in Ihrem Code. Aber ich habe sie herausgefunden und kam mit der Lösung heraus. Verwenden Sie diese

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

ist hier ein Werk jsFiddle