Build a Survey Form: User Story #14

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.

If you have a codepen of your project, it is best to provide that link, so we can see all tests which are failing. I believe you need to add an id attribute to each checkbox input which has the same name the for attribute value in each label.

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

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.

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

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 @RandellDawson, thanks again for trying to help with this.