Question 179530 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can I print a JS loop to an element by ID?

The same output I get in a console.log is not posting to the HTML div and I cannot figure out why.

I am expecting this array to print:

["Thief", "The Lion", "Harry Potter", "Lord of the Rings"]

const myLibrary = ["Thief", "The Lion", "Harry Potter", "Lord of the Rings"];

function Book() {
  // the constructor
}

var bookLength = myLibrary.length;


function addBookToLibrary() {
  for (var b = 0; b < bookLength; b++)
    console.log(myLibrary[b]);
    
  return myLibrary[b];
}

var labels = document.getElementById("myBooks").innerHTML;
labels = addBookToLibrary();
<p>My list should be below</p>
<p id="myBooks"></p>

<!-- script src="script.js"></script -->
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 

    const myLibrary = ["Theif", "The Lion", "Harry Potter", "Lord of the Rings"];

function Book(){
    // the constructor
}

function addBookToLibrary(myLibrary) {
    var result = "";
    for (var library in myLibrary){
        console.log(myLibrary[library]);
        result += myLibrary[library] + "<br>";
    }
    return result
}


document.getElementById("myBooks").innerHTML = addBookToLibrary(myLibrary);

    The result I came to. I am confused why the return result worked but remembered i needed it from past lessons, i googled the


  2. 0

    A couple of issues in play:

    1. Your labels variable is a copy of innerHTML’s value, not a reference to it.

    Your labels variable is not a reference to the source element’s innerHTML. It is a copy of its value at the time you assigned it. So changing the value of labels does not affect the source element in any way whatsoever.

    If you want to update the element’s innerHTML you must assign it directly. (There are other ways to do this, but for the purposes of this question I’m focusing on what OP is trying to do.)

    const myLibrary = ["Thief", "The Lion", "Harry Potter", "Lord of the Rings"];

document.querySelector('#myBooks').innerHTML = myLibrary.join('<br/>');
    <p>My list should be below</p>
<p id="myBooks"></p>

    2. You loop over the array to log them, then return undefined.

    The reason your console.log(labels); call emits undefined is because your for loop advances b until it’s the length of the array, and then you return myLibrary[b].

    Javascript arrays are zero-indexed, meaning the first item is n[0] and the last item is at n[length - 1].

    Because your b variable is equal to myLibrary.length when your for loop exits, myLibrary[b] is undefined, so that’s what you see in the log.

    const myLibrary = ["Thief", "The Lion", "Harry Potter", "Lord of the Rings"];

function addBook() {
  for(var b = 0; b < myLibrary.length; b++) {
  }
  console.log(b); // 4
  return myLibrary[b]; // myLibrary[4] === undefined;
}

addBook();
    Login or Signup to reply.
  3. 0 
    const myLibrary = ["Theif", "The Lion", "Harry Potter", "Lord of the Rings"];

function Book() {
  // the constructor
}

var bookLength = myLibrary.length;
var outer = "";

var labels = document.getElementById("myBooks")
function addBookToLibrary() {
  for (var b = 0; b < bookLength; b++){
    labels.innerHTML += myLibrary[b] + "<br>"
    outer += myLibrary[b] + 'n'
    console.log(myLibrary[b]);
   } 
  return outer;
  
}


labels = addBookToLibrary();

console.log(labels);
    <p>My list should be below</p>
<p id="myBooks"></p>

<!-- script src="script.js"></script -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search