Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Build an Interactive Form

Michael Escribano
seal-mask
.a{fill-rule:evenodd;}techdegree
Michael Escribano
Full Stack JavaScript Techdegree Student 5,221 Points
Posted by Michael Escribano
.a{fill-rule:evenodd;}techdegree
Michael Escribano
Full Stack JavaScript Techdegree Student 5,221 Points

I can't get this text input to hide once another selection is made..

here's what ive gotten so far for my 3rd FSJS tech degree project 

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('name').focus();

//Create text input for Job Description hidden at page load 
  const otherTitle = document.getElementById('#other-title');
  const otherInput = document.createElement('input', 'text', 'otherInput');
  title.parentNode.appendChild(otherInput);
  otherInput.style.display = "none"

//Once "Other" is selected from Job Title dropdown, text input field will appear
// If another choice is selected again, it will disappear
  otherTitle.addEventListener("click", function (){
    if(otherTitle.value.toLowerCase() === "other".toLowerCase()){
      otherInput.style.display = ""
    } else {
      otherInput.style.display = "none"
    }
  });

});

I've got the first text field to gain focus once the dom has loaded, and I've got the text input to show up after you select other in the drop down selector but for some reason it is not disabling it or hiding it if you choose another selection.. say you choose Other by accident and want to choose another option the text input box still shows. i want to hide it if you choose another.

could anyone tell me what I'm doing wrong?

1 Answer

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

I see a few issues:

  • the "#" in '#other-title' will prevent getElementById from working
  • "title" is never defined
  • you don't need a toLowerCase on a literal string with only lower case in it
Michael Escribano
seal-mask
.a{fill-rule:evenodd;}techdegree
Michael Escribano
Full Stack JavaScript Techdegree Student 5,221 Points
Michael Escribano
.a{fill-rule:evenodd;}techdegree
Michael Escribano
Full Stack JavaScript Techdegree Student 5,221 Points

I'll have to try that when I get home. Everything else works so far. Even when you select other from the drop down the new text field appears. But if you select another it doesn't disappear. But again I'll give it a try. Thanks for the input

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

I'm not a "Techdegree" student and don't have access to the project to confirm; it worked for me after the fixes, but I had to guess about the HTML. If it does, you can mark the question closed by choosing a "best answer". If not, add further info and I'll take another look.

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

Show the script code again with the modifications made, and also the HTML code it works with (and CSS, if any). If you use workspaces, you can make a snapshot of your workspace and post the link to it to share all the code at once.

Michael Escribano
seal-mask
.a{fill-rule:evenodd;}techdegree
Michael Escribano
Full Stack JavaScript Techdegree Student 5,221 Points
Michael Escribano
.a{fill-rule:evenodd;}techdegree
Michael Escribano
Full Stack JavaScript Techdegree Student 5,221 Points

Also, Thanks a lot for taking the time out of your day to help me out. I really appreciate it. The camaraderie among programmers/coders is inspiring me so much.

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

I had guessed wrong about which ID was for the select. Now that i see the HTML, here's some suggestions:

  title.addEventListener("change", function() {
    if (title.value === "other") {
      otherInput.style.display = "";
      otherInput.focus();
    } else {
      otherInput.style.display = "none";
    }
  });

We can use only the select since the value of the chosen option will also be the value of the select. And the "change" event gives better performance for a select than "click". And it's not necessary to change the case of of the value since that's also a literal known to have only lower case. For good measure, I also gave focus to the other input whenever it becomes visible so the user can begin typing immediately.

Welcome to the forum!