Improve the instructions

Programming JavaScript
22

When it says " Add your new HTMLString to the targetInputContainer by using the innerHTML property."

How do I know if that’s on the same line as the HTML String or on a fresh new line?

23

You can help the team, make the course more beginner friendly by bringing up issues for challenges or updates to text.

The team wants this course to be accesibile to all beginners and your feedback would be very valuable in that regards. :+1:

24

Also what am I supposed to add after += ? So many unknowns lol

25

In this case, it would be a new line where you would add your answer.

Since we are using a semicolon at the end of the HTML string, that signals the end of that statement. So we would write our code on a new line.

What does your current code look like?

Following the example here, the lesson wants you to append the html string variable to your target input container variable

containerVariableGoesHere.innerHTML += someStringVariable
26
27

I see your starting code but what have you tried for the innerHTML part.

it should follow this format here

28

Sorry, added it

29

Ok cool.
Now I can see it

Your answer should be one line of code.

You don’t need to create a new HTMLString variable because you already have one from earlier which is this

  const HTMLString = `
  <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>
  <input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />
  <label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>
  <input
    type="number"
    min="0"
    id="${entryDropdown.value}-${entryNumber}-calories"
    placeholder="Calories"
  />`;

so you can reference that HTMLString variable.

You can also remove this part here because there is no element that has an id of HTMLString

document.getElementById("HTMLString");

I have created an issue to update the code example and instructions

Let’s use the example from my proposed update.

const formElement = document.getElementById("form");
const formContent = `
  <label>Last name</label>
  <input type="text">
`;
formElement.innerHTML += formContent;

On line one of my example, we are getting the form element with the id of form.
Then on the next line, we are creating a variable called formContent which has a label and input.

Then right after that, we are appending the formContent to the formElement.
here is the line that you will need to use for the challenge you are working on

formElement.innerHTML += formContent;

Your answer should be one line of code, following that format where you append the html string content variable to the target input container element.

hope that helps

30

I’m gonna have to come back to this, I’m even more confused than before… I don’t understand how the example can be 3 lines of code, but then the answer is 1 line? No wonder I’m having problems haha

31

So these two lines are just the setup code

In the challenge, it is equivalent to these lines here

const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  const HTMLString = `
  <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>
  <input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />
  <label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>
  <input
    type="number"
    min="0"
    id="${entryDropdown.value}-${entryNumber}-calories"
    placeholder="Calories"
  />`;

the reason why your answer needs to be one line of code, is because you only need to write this part here

hope that is clearer

32

Thank you. Not sure how a beginner is supposed to know that based on the instructions or the example, though.

33

We will keep iterating on the instructions and examples for the beta curriculum to help beginners better understand what is happening.

Plus people like @JeremyLT and the rest of the mods and contributors have been helpful updating challenges too. :+1:

34

@jwilkins.oboe @JeremyLT Hi! I’m new here, but the instructions look fine to me in this example.

35

The example is 3 lines of code but the answer is 1 line of code. That looks fine to you?

36

The examples should generally not be a copy-paste and small edit of the answers

37

What’s the point of the example then if it’s nowhere close to the solution?

38

It is close to the solution. But we do want users to think about what they see instead of copy-pasting

39

I’ve been thinking about it for 2 hours because the example isn’t good enough, is that long enough you think?

40

The proposed new example hasn’t existed for 2 hours? I thought that’s what you were talking about? And that example isn’t a small edit to a copy-paste of the answer

41

I’m talking about the original example in the course

const container = document.getElementById("container");
container.innerHTML += `
  <p>adding new content</p>
`;