Build a Survey Form: User Story #14

HTML-CSS
1

Tell us what’s happening:
I’m failing 1 of the 17 tests, specifically number 14. I’ve included the code and error below.

The relevant piece of code so

...
				<!-- IMPROVEMENTS CHECKBOX SELECTION -->
				<label for="frontend">Frontend Projects</label>
				<input type="checkbox" name="improvements" value="frontend">
				
				<label for="backend">Backend Projects</label>
				<input type="checkbox" name="improvements" value="backend">
				
				<label for="data_vis">Data Visualisation</label>
				<input type="checkbox" name="improvements" value="data_vis">
				
				<label for="challenges_improve">Challenges</label>
				<input type="checkbox" name="improvements" value="challenges_improve">
				
				<label for="open_source_improve">Open Source Community</label>
				<input type="checkbox" name="improvements" value="open_source_improve">
				
				<label for="gitter_help">Gitter help rooms</label>
				<input type="checkbox" name="improvements" value="gitter_help">
				
				<label for="videos">Videos</label>
				<input type="checkbox" name="improvements" value="videos">
				
				<label for="meetups">City Meetups</label>
				<input type="checkbox" name="improvements" value="meetups">
				
				<label for="wiki">Wiki</label>
				<input type="checkbox" name="improvements" value="wiki">
				
				<label for="forum">Forum</label>
				<input type="checkbox" name="improvements" value="forum">
				
				<label for="add_courses">Additional Courses</label>
				<input type="checkbox" name="improvements" value="add_courses">
...

Error output

:x: 14. Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.

SyntaxError: The string did not match the expected pattern.querySelectorAll@[native code]
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:147:278960
r@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7856
run@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8854
runTest@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13556
https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:14199
r@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13025
https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13001
n@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12792
https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12856
i@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:1:559

Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form

Thanks in advance for any help.

3

Your for should match the id of the input field, you miss that

4

Thank you so much for the quick response to both, and you are absolutely right with the id issue. I actually rectified that earlier (or at least I think I did) after perusing the MDN and W3C pages, and posted the html of an earlier try.

Unfortunately with the id atrribute added, I am still getting the same error so I’ve clearly still gone askew somewhere. Here’s the most recent, yet still erroring, html code below;

				<!-- IMPROVEMENTS CHECKBOX SELECTION -->
				<label for="frontend">Frontend Projects</label>
				<input type="checkbox" id="frontend" name="improvements" value="frontend">
				
				<label for="backend">Backend Projects</label>
				<input type="checkbox" id="backend" name="improvements" value="backend">
				
				<label for="data_vis">Data Visualisation</label>
				<input type="checkbox" id="data_vis" name="improvements" value="data_vis">
				
				<label for="challenges_improve">Challenges</label>
				<input type="checkbox" id="challenges_improve" name="improvements" value="challenges_improve">
				
				<label for="open_source_improve">Open Source Community</label>
				<input type="checkbox" id="open_source_improve" name="improvements" value="open_source_improve">
				
				<label for="gitter_help">Gitter help rooms</label>
				<input type="checkbox" id="gitter_help" name="improvements" value="gitter_help">
				
				<label for="videos">Videos</label>
				<input type="checkbox" id="videos" name="improvements" value="videos">
				
				<label for="meetups">City Meetups</label>
				<input type="checkbox" id="meetups" name="improvements" value="meetups">
				
				<label for="wiki">Wiki</label>
				<input type="checkbox" id="wiki" name="improvements" value="wiki">
				
				<label for="forum">Forum</label>
				<input type="checkbox" id="forum" name="improvements" value="forum">
				
				<label for="add_courses">Additional Courses</label>
				<input type="checkbox" id="add_courses" name="improvements" value="add_courses">

The error is the same as the above.

5

What error do you get now.? Can you provide a codepen of your proj, so it would be easy to view and suggest you.

6

Fortunately the issue seems not to have been an issue with the code at all, as both code examples (even the one without ‘id’ attr) work fine in Firefox, I can only assume it was a problem with Safari.

Regardless, @Sujith3021 and @camperextraordinaire, thanks again for trying to help with this.