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

3

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

answered Nov 27, 2018 at 8:11

Anurag Sinha

1,03210 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

1

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>

edited Nov 27, 2018 at 8:17

answered Nov 27, 2018 at 8:12

Clark

3051 silver badge8 bronze badges

Comments

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

1

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

answered Nov 27, 2018 at 8:20

bartekwaliszko

1,1628 silver badges6 bronze badges

Collectives™ on Stack Overflow

Adding JS to HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related