javascript - 当用户从选择菜单中选择特定元素时显示输入文本字段

Question

我试图让这段代码仅使用纯 JS 运行。

当用户选择“其他”时，我希望显示我的输入字段，但仅当他们选择“其他”时。

我隐藏了输入，因此在调用之前不会显示它。

我在选择字段上设置了一个监听器

创建 if/else 语句来查找 select 字段的值并将其设置为 other 的值。

我在这里缺少什么？

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

问题出在这里:

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

您正在为文本字段分配字符串值“none”。

这样做:

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