gloopit gloopit - 3 months ago 15
HTML Question

Why isn't my text field being added to the page?

I'm working on the interactivity of a simple HTML form.

Specifically, there is a dropdown select box for job roles. If 'other' is selected, then a text field should appear, asking the user to be more specific.

I'm a beginner and want to do this without jQuery.

Here is a snippet of the HTML I am working with:

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


My intuition tells me to first build the text field and add it's attributes.

I will then use an if condition to test whether or not the selected option is 'other'. If it is, then I will append the newly created text field to the page.

This hasn't been working so far. To try and debug this, I have tried console logging the elements I am trying to work with. I don't think I'm understanding how this works as it's printing out 'undefined' and 'null'.

Here is my JS:

// TASK: Add interactivity to form

'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

You need to set up an event listener to listen for the "change" event that is fired when the user makes a selection from the dropdown menu. Also you are referencing "basicSelection" instead of "basicSection" in your if statement.

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

Comments