Adding JS to HTML

Question

In the printFullName() function:

1.Create a local variable also named fullName.

2.Assign the local variable the value, “Bill Smith”.

3.Add a list item to the HTML ordered list with the id of "outputList" with the local fullName variable as the data.

In the main function lab02localGlobal():

1.Assign the name “Judy Green” to the global variable version of fullName.

2.Add a list item to the HTML ordered list with the id of "outputList" with the global fullName variable as the data.

3.Call the printFullName() function.

Should display like this: 1. Judy Green 2. Bill Smith

However it keeps display this: Bill Smith 1. Bill Smith

// global variables var fullName; fullName = "Judy Green"; function printFullName() { "use strict"; // declare variable var fullName; var output; // assign value to variable fullName = "Bill Smith"; output = document.getElementById("outputList"); fullName += "<li>" + fullName + "</li>"; output.innerHTML = fullName; } function lab02localGlobal() { "use strict"; var output; output = document.getElementById("outputList"); fullName = "<li>" + fullName + "</li>"; output.innerHTML = fullName; printFullName(); }

You are replacing fullName in printFullName instead of appending to the output. You should probably call output.innerHTML += .... — Makkes
– Makkes, Commented Nov 27, 2018 at 8:11
Consider @Makkes comment and Don't use fullName += "<li>" + fullName + "</li>";, It should be fullName = "<li>" + fullName + "</li>"; — Karan
– Karan, Commented Nov 27, 2018 at 8:12

Anurag Sinha · Accepted Answer · 2018-11-27 08:11:25Z

That's beacuse you are overwriting your innerHTML in printFullName() function. Trying appending to what you have already added in lab02localGlobal().

You can use appendChild() method. Refer https://plainjs.com/javascript/manipulation/append-or-prepend-to-an-element-29/ for more details

Clark · Accepted Answer · 2018-11-27 08:17:55Z

Beacuse you use printFullName set fullName value,But it will cover origin fullName became Bill Smith.You can try below code:

// global variables var fullName; fullName = "Judy Green"; function printFullName() { "use strict"; // declare variable var fullName; var output; // assign value to variable fullName = "Bill Smith"; output = document.getElementById("outputList"); output.innerHTML += "<li>" + fullName + "</li>"; } function lab02localGlobal() { "use strict"; var output; output = document.getElementById("outputList"); fullName = "<li>" + fullName + "</li>"; output.innerHTML = fullName; printFullName(); } lab02localGlobal()

<div id="outputList"></div>

bartekwaliszko · Accepted Answer · 2018-11-27 08:20:40Z

your function 'lab02localGlobal()' keeps replacing content of 'output' element, not adding/appending content to it.

You should change line:

output.innerHTML = fullName;

to:

output.append(fullName);

Collectives™ on Stack Overflow

Adding JS to HTML

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related