JS - I'm receiving a console message and not sure how to proceed

[jsanderson]

Hello campers.

Big thank you to everyone who has helped make this possible - I’m loving the challenge of learning something new. Being that I am new, I’m not sure what to do about the console message I am getting in the screenshot above. Is it legit? It’s referring me to turn on some developer setting from babel git hub or something. Not sure what that is. All I know is that it is saying because of

“SyntaxError: unknown: Support for the experimental syntax ‘jsx’ isn’t currently enabled (24:3):”

I am not able to proceed through the lesson. I can’t do anything. The option to check my code is grayed out and does not appear in preview. Seeing as how I didn’t adjust any settings between the two steps of this lesson it seemed a little bit suspicious that I would get this message. Am I being paranoid? Is this something that should be on and if so how would I turn it on? Or would it simply be better to use a different browser? Any help would be greatly appreciated. Thank you.

[jwilkins.oboe]

Please write your code directly in the forum so we can test out the problem on our end.

Also, please share the link of the lesson you are working on

thanks

[jwilkins.oboe]

here is how to write code in the forum

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[jwilkins.oboe]

Based on the picture, it looks like you have a semicolon in the wrong place.

But I will know more once you provide the code

[lasjorg]

The input element you added should be inside the template string with the label element.

[jsanderson]

Wow, you guys are very fast at responding!

Ok here is the link to the lesson that I am currently working on:

freeCodeCamp.org

Ok, I hope I do this right, here is my code:

function addEntry() {
  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" placeholder="Name" id="${entryDropdown.value}-${entryNumber}-name"></input>
}

Any help would be great! Also, it’s about a week since I’ve coded and I have forgotten about what we are trying to accomplish with this step…

[jwilkins.oboe]

The input needs to be inside the template strings ``

Right now you have it outside

@jsanderson

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

also inputs are self closing and don’t have closing tags like this

@jsanderson

</input>

: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

once you fix that, then it will pass

[jsanderson]

Thanks you so much! That worked! (Also thank you to lasjorg as well who also told me the same thing)!

Much appreciated!