CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-19 21:09:51 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix(curriculum): updating directions and code example for step 49 calorie counter (#53199)

Browse Source 
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Yatrik Patel 2024-01-16 02:50:06 -05:00 committed by GitHub
parent a09a3bd849
commit 57149fecdb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
View File

@ -9,22 +9,29 @@ dashedName: step-49
To see your new HTML content for the `targetInputContainer`, you will need to use the <dfn>innerHTML</dfn> property.
The `innerHTML` property sets or returns the HTML content inside an element. Here is an example of how to use it:
The `innerHTML` property sets or returns the HTML content inside an element.
Here is a `form` element with a `label` and `input` element nested inside.
```html
<div id="container">
<p>Example paragraph</p>
</div>
<form id="form">
<label for="first-name">First name</label>
<input id="first-name" type="text">
</form>
```
If you want to add another `label` and `input` element inside the form, then you can use the `innerHTML` property as shown below:
```js
const container = document.getElementById("container");
container.innerHTML += `
<p>adding new content</p>
const formElement = document.getElementById("form");
const formContent = `
<label for="last-name">Last name</label>
<input id="last-name" type="text">
`;
formElement.innerHTML += formContent;
```
Add your new `HTMLString` to the `targetInputContainer` by using the `innerHTML` property. Remember to use the `+=` operator to add to the existing HTML instead of replacing it.
Use the addition assignment operator `+=` to append your `HTMLString` variable to `targetInputContainer.innerHTML`.
# --hints--