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 trialMichael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsI 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
231,236 PointsI 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
Full Stack JavaScript Techdegree Student 5,221 PointsMichael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsI'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
Michael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsMichael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsOnce I fix those 3 issues all of this code should work, correct?
Steven Parker
231,236 PointsSteven Parker
231,236 PointsI'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.
Michael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsMichael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsThat didn't work. What type of information would you need?
Steven Parker
231,236 PointsSteven Parker
231,236 PointsShow 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
Full Stack JavaScript Techdegree Student 5,221 PointsMichael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsI got it to work with this, I just thought that there may be a way to refactor this into one block. let me know what you think
Snapshot
Michael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsMichael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsAlso, 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
231,236 PointsSteven Parker
231,236 PointsI had guessed wrong about which ID was for the
select
. Now that i see the HTML, here's some suggestions: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!
Michael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsMichael Escribano
Full Stack JavaScript Techdegree Student 5,221 PointsOH! Man, that makes so much more sense! Thanks so much Steven Parker