well im stuck on step 16 of bulid a checkout page
Yes, but what about the error message you are getting do you not understand? The error message is saying where your p element needs to be and it is not there.
I understand that. Thatâs the title of the thread actually.
What is preventing you from implementing the instructions?
If you just keep repeating âIâm stuckâ no one can understand how to help you.
my issue is step 16 which is :16. You should have a p element with an id of card-number-help immediately after the card number input.
We already know that part. You keep repeating that. Please talk about how you are stuck understanding what that error message says.
Do you know which p element that tests is talking about?
Do you know what âimmediately afterâ means here?
the error message says my issue is step 16 which is :16. You should have a p element with an id of card-number-help immediately after the card number input. this is the part I
donât understand
Currently it looks like this in your code:
<input>,
after it
<label>, inside of <label> is a <span> with a <p>.
I think you don´t understand what nesting is or your code is too hard to read and thus hard to see to you how are elements are positioned.
Just because <p> is inside the <label>, it doesn´t make them the same. They are still different elements working and positioned differently.
I suggest to make your code nicer and readable first, like I showed you above on the photo, than try to find out again, why test 16. fail.
If you can´t, you may share the updated code to help you out better.
This is from the code you originally posted. Please remove the opening paragraph tags before the label elements. There should only be one p element in your codeâŚthe one that is after the #card-number input element.
ok thank you for this tip i will go try it out
i have tried but still never got it correct is there any other way
Youâll need to post your updated code.
ok how do i show my code
Just copy and paste, like you did before here.
<!DOCTYPE html>
<html lang="en">
<!-- Insert your current code here -->
<head>
<meta charset="UTF-8" />
<title>Checkout Page</title>
</head>
<body>
<h1>Checkout</h1>
<section>
<h2>Your Cart</h2>
<img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="A 3 x 3 x 3 Rubik's Cube.">
</section>
<section>
<h2>Payment Information</h2>
<form>
<input required
id="card-name"
name="card-name"
type="text">
<label for="card-name">
<span aria-hidden="true">*</span>Please Enter Your Name.</label>
<input required
id="card-number"
name="card-number"
type="text"
aria-describedby="card-number-help">
<label for="card-number">
<span aria-hidden="true">*</span>Please Enter Your Card Details.<p id="card-number-help"> dddhnjdnvhd</p></label>
</form>
</section>
</body>
</html>
Iâve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.
You can also use the âpreformatted textâ tool in the editor (</>) to add the backticks.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Your Paragraph element is still inside the Label element and not immediately after the input with the id="card-number".
Do you know which element is your card number input? Your p element is not immediately after that element
ohh thanks ill reply if i get it wrong
Here is the code you originally posted. And this is the correct placement.
thank you i passed the test
1 Like