Showing an input text field when user selects certain element from select menu

Question

Im trying to get this code to run with only plain JS.

When the user selects 'Other' I want my input field to show but only when they select 'Other'.

Ive hidden the input so its not displayed before its called.

I set a listener on the select field

Created the if/else statement looking for the value of the select field and set that to the value of other.

What am I missing here?

const select = document.getElementById('title');
let textField = document.getElementById('other-title').style.display = "none";  

//This sets the focus on the first input field
function setFocusToTextBox(){
    document.getElementById("name").focus();
}
setFocusToTextBox();


select.addEventListener("change", function() {
    if(select.value === 'other') {
        textField.style.display = "block"; 
    } else {
        textField.style.display = "none"; 
    }
});

<fieldset>         
        <legend>Basic Info</legend>
        
        <label for="name">Name:</label>
        <input type="text" id="name" name="user-name" placeholder="Enter Your Full Name">
        
        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user-email" placeholder="Enter Valid Email">
        
        <label for="title">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 for="other-title">Other Title</label>
        <input type="text" id="other-title" name="job_role_other" placeholder="Your Job Role">

      </fieldset>

Answer 1

This works:

const select = document.getElementById('title');
var textField = document.getElementById('other-title');  
var otherTitleLabel = document.getElementById('other-title-label');
//This sets the focus on the first input field
document.getElementById('other-title').style.display = "none";
otherTitleLabel.textContent="";
function setFocusToTextBox(){
    document.getElementById("name").focus();
}
setFocusToTextBox();


select.addEventListener("change", function() {
    if(select.value === 'other') {
        textField.style.display = "block"; 
    } else {
        textField.style.display = "none";
        otherTitleLabel.textContent="";
    }
});

<fieldset>         
        <legend>Basic Info</legend>
        
        <label for="name">Name:</label>
        <input type="text" id="name" name="user-name" placeholder="Enter Your Full Name">
        
        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user-email" placeholder="Enter Valid Email">
        
        <label for="title">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 for="other-title" id="other-title-label">Other Title</label>
        <input type="text" id="other-title" name="job_role_other" placeholder="Your Job Role">

      </fieldset>

Answer 2

The problem is here:

let textField = document.getElementById('other-title').style.display = "none"

You are assigning textField string value "none".

Do this instead:

let textField = document.getElementById('other-title');
document.getElementById('other-title').style.display = "none";