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 trialKarl Russell Sumando Menil
Full Stack JavaScript Techdegree Student 4,004 PointsInteractive Form The "Name" field:
Im taking my time with this project and i am going to do it step by step bu when in downloaded the project files there was no js file and when i read through the instructions it said to make your own js file so i am making one right now:
the first step was:
The "Name" field: When the page loads, the first form field should be in focus, meaning it should have a flashing cursor and/or be highlighted in some way.
Create a variable to reference the βNameβ <input type="text"> element and log the variable out to the console to ensure the correct element is being referenced. Use the variable and dot notation to set the focus property of the element to true. Now save and refresh the page, and the βNameβ field should have the focus state.
My answer is:
const data = [ { name: { title: "Mr", first: "Karl", last: "Menil", }, email: "karl.menil@example.com", registered: { date: "03-05-2021", age: 25, }, ];
or should i do it on the html? like this:
<fieldset> <label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10"> </fieldset>
how do i translate this code to javascript? do i do it like this? const nameInput = document.getElementById("name"); function isValidname(name) {}
function showOrHideTip(show, element) { // show element when show is true, hide when false if (show) { element.style.display = "inherit"; } else { element.style.display = "none"; } }
function createListener(validator) { return e => { const text = e.target.value; const valid = validator(text); const showTip = text !== "" && !valid; const tooltip = e.target.nextElementSibling; showOrHideTip(showTip, tooltip); }; }
nameInput.addEventListener("input", createListener(isValidname));
Any hints, suggestions, and comments are very well appreciated. thank you in advance for all your help.
1 Answer
Peter Vann
36,427 PointsHi Karl!
The instructions are WAY misleading.
I had to research this to understand it.
nameField.focus = true; doesn't work (but the instructions suggest that it would) the correct syntax is:
nameField.focus(); // Gives the field focus
This works:
let nameField = document.getElementsByTagName('INPUT')[0]; // [0] = The first one assuming your field is declared as mearly <input type="text">
// If it was declared <input id="name" type="text">, you could use
// let nameField = document.getElementById('name');
console.log(nameField);
nameField.focus(); // Bingo/Yahtzee (name field has focus)!?!?! LOL
I hope that helps.
Stay safe and happy coding!
Karl Russell Sumando Menil
Full Stack JavaScript Techdegree Student 4,004 PointsKarl Russell Sumando Menil
Full Stack JavaScript Techdegree Student 4,004 PointsPeter Vann thank you sir that helps a lot