CODEWITHSUNDEEP
javascript
M.P.T.
M.P.T.

Reputation: 97

Adding JS to HTML

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();
}

Upvotes: 0

Views: 128

Answers (3)

bartekwaliszko
bartekwaliszko

Reputation: 1162

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);

Upvotes: 1

Clark
Clark

Reputation: 305

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>

Upvotes: 1

Anurag Sinha
Anurag Sinha

Reputation: 1032

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

Upvotes: 3

Related Questions