How can I make a div appear when a user selects a specific option?

Question

I'm trying to make a text area field appear below my list of options when "Other" is clicked, but I cannot get my JS function to work.

What am I doing wrong?

 function showOtherJobRole(nameOfJob) { if (nameOfJob == "other-title") { const otherJobTitle = document.getElementById("other-title").value; if (otherJobTitle == nameOfJob.value) { document.getElementById("showOtherJobRole").style.display = "block"; } else { document.getElementById("showOtherJobRole").style.display = "none"; } } else { document.getElementById("showOtherJobRole").style.display = "none"; } }

 <fieldset> <label for="title">Job Role</label> <select id="title" name="user-title" onchange="showOtherJobRole(this);"> <option value="" disabled="disabled" selected>--</option> <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 id="other-title">Other</option> </select> </fieldset> <div id="showOtherJobRole" style="display: none"> <textarea name="otherJobText" id="otherJobText" cols="40" placeholder="Your Job Role" rows="4"></textarea> </div>

Answer 1

I assume that this is what you're looking for. I made it that when you select Designer it will display the div with the showDiv ID.

HTML

<div id="showDiv">
   <p>some content</p>
</div>

<select id="title" name="user-title">
        <option value="" disabled="disabled" selected>--</option>
        <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 id="other-title">Other</option>
</select>

I removed the JS code that you were using as I think that this will fit better to your needs. You'll have to customize it tho.

JavaScript

const source = document.querySelector("#title");
const target = document.querySelector("#showDiv");

const displayWhenSelected = (source, value, target) => {
    const selectedIndex = source.selectedIndex;
    const isSelected = source[selectedIndex].value === value;
    target.classList[isSelected
        ? "add"
        : "remove"
    ]("show");
};
source.addEventListener("change", (evt) =>
    displayWhenSelected(source, "designer", target)
);

CSS

#showDiv {
  display: none;
}

#showDiv.show {
  display: block;
}

Answer 2

There's no need to pass this in the eventHandler. an event object is automatically passed to your handler. What you need to do is capture the value of the element that triggered the event. Your function should look like this

function showOtherJobRole(event) {
    if (event.target.value == "other-title") {
        document.getElementById("showOtherJobRole").style.display = "block";
    }
    else {
        document.getElementById("showOtherJobRole").style.display = "none";
    }
}

and your html like this

<fieldset>
  <label for="title">Job Role</label>
  <select id="title" name="user-title" onchange="showOtherJobRole">
    <option value="" disabled="disabled" selected>--</option>
    <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-title" id="other-title">Other</option>
  </select>
</fieldset>
<div id="showOtherJobRole" style="display: none">
  <textarea name="otherJobText" id="otherJobText" cols="40" placeholder="Your Job Role" rows="4"></textarea>
</div>

Try this let's see if it works

Answer 3

First, check your HTML portion. You have no value attribute for the "Other" option. So, add a value attribute. Second, you do not need to pass "this". Third, you do not need to add id for the other option because you can do your job by the select id named "title". So, long story short call the function onChange select. Get the value of the selected option by getElementById function and compare its value equal to "other-title" or not. If it is "other-title", then show the div text area otherwise not.

 function showOtherJobRole() { let nameOfJob = document.getElementById("title").value; if (nameOfJob === "other-title") { document.getElementById("showOtherJobRole").style.display = "block"; } else { document.getElementById("showOtherJobRole").style.display = "none"; } }

 <fieldset> <label for="title">Job Role</label> <select id="title" name="user-title" onchange="showOtherJobRole();"> <option value="" disabled="disabled" selected>--</option> <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-title">Other</option> </select> </fieldset> <div id="showOtherJobRole" style="display: none"> <textarea name="otherJobText" id="otherJobText" cols="40" placeholder="Your Job Role" rows="4"></textarea> </div>