I am trying to write a couple of functions, one that adds a book to a empty array and another function that renders it on the page. Its not working

Question

I want to be able to write the title of a book for now, then have it save to an array. When I click add book it should pop up right below the example text on the page, however im not sure why my functions are not working. Im new to this so its a bit confusing.

<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container">
<h1>Library</h1>
<button type="button" onclick="addBookToLibrary();" id="addButton">Add 
A Book</button>

<div class="formContainer">
<form id="info">
    <input type="text" placeholder="Title" id="title">
    <input type="text" placeholder="Author"
    id="author">
    <input type="number" placeholder="#Pages" min="0" max="5000" 
id="number">
    <label for="read">Read?</label>
    <input type="checkbox" id="read">
</form>
</div>

</div>
<hr>
<div class="bookContainer">
<div class="wrapper">
<h2>Title</h2>
<h2>Author</h2>
<h2>Pages</h2>
<h2>Read</h2>
</div>
<div class="books"> 
    <p class="item">The Hobbit</p>
    <p class="item">by J.R.R. Tolkien</p>
    <p class="item">295 pages</p>
    <p class="item">Read</p>
</div>
</div>

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#addButton {
margin-bottom: 1em;
}
.container {
text-align: center
}
.container h1 {
margin-top: .5em;
margin-bottom: .5em;
}
hr {
margin-top: 2em;
margin-bottom: 2em;
}
.bookContainer{
width: 90%;
border:2px solid black;
margin: auto;
}
.wrapper {
display: flex;
justify-content: space-around;
}
.books {
display: flex;
justify-content: space-around;
margin-top: 1em;
}
.item {
flex:1;
text-align:center;
}
#number {
width: 8%;
}

let myLibrary = [];

function book(title, author, pages, read) {
  this.title = title
  this.author = author
  this.pages = pages
  this.read = read
  this.info = function() {
    console.log(title, author, pages, read);
  }
}


function addBookToLibrary() {
  // get value from the input text
  let title = document.querySelector('#title').value;
  //append data to the array myLibrary
  myLibrary.push(title);

  let pval = '';

  for (i = 0; i < myLibrary.length; i++) {
    pval = pval + myLibrary[i] + '<br/>';
  }
}

function render() {
  //display array data
  document.querySelector('.wrapper').innerHTML = pval;
}

I didnt add the html bc i didnt want it to be super long, but if you need it i can always add it.

better put your code into Code Snippet and we can help find issue. — BeiBei ZHU, Aug 01 '19 at 02:10
You might want to use a [debugger](https://stackoverflow.com/questions/25385173/what-is-a-debugger-and-how-can-it-help-me-diagnose-problems) for that or look at [How to debug small programs](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/) — Andreas, Aug 01 '19 at 02:11
you have few error here, 1. pval need to put ourside, 2, render function never been called. — BeiBei ZHU, Aug 01 '19 at 06:53

Chris Kao · Accepted Answer · 2019-08-01T04:18:53.680

Your pval is not in the same scope with function render. And try to keep your array storing only data instead of html string so that you can keep flexibility to do any thing.

let myLibrary = [
  {
    title: 'The Hobbit',
    author: 'by J.R.R. Tolkien',
    pages: '295 pages',
    read: 'Read'
  }
];

function book(title, author, pages, read) {
  this.title = title
  this.author = author
  this.pages = pages
  this.read = read
  this.info = function () {
    console.log(title, author, pages, read);
  }
}


function addBookToLibrary() {
  // get value from the input text
  let title = document.querySelector('#title').value;
  let author = document.querySelector('#author').value;
  let pages = document.querySelector('#number').value;
  let read = document.querySelector('#read').checked ? document.querySelector('#read').value : '';

  // create a book
  let b1 = new book(title, author, pages, read);

  // append data to the array myLibrary
  myLibrary.push(b1);

  // invoke render function
  render();
}

function render() {
  //display array data
  let pval = '';

  for (i = 0; i < myLibrary.length; i++) {
    pval += '<div class="book">';
    pval += '<p class="item">' + myLibrary[i].title + '</p>';
    pval += '<p class="item">' + myLibrary[i].author + '</p>';
    pval += '<p class="item">' + myLibrary[i].pages + '</p>';
    pval += '<p class="item">' +  myLibrary[i].read + '</p>';
    pval += '</div>'
  }
  document.querySelector('.books').innerHTML = pval;
}

You should provide a specific description instead of 'Doesnt work' only. Such as error message or the steps you put the code snippet in your program. It will always work if try to modify the code snippet above to fit your scenario. That's what we can't help you because we don't know what you want.

Anyway, you can check the link of solution which I've tried to understand your need below. And try to modify it to fit your need.

https://jsfiddle.net/chi1010860/Lc71w2f0/

Doesnt work. I added the html and css above if you can take another look — Christopher Altamirano, Aug 01 '19 at 03:05

Muhammed Alper Uslu · Answer 2 · 2019-08-01T02:21:29.177

take a look here : https://www.w3schools.com/js/js_arrays.asp

var myLibrary = new Array();

function book(title, author, pages, read) {
  this.title = title
  this.author = author
  this.pages = pages
  this.read = read
  this.info = function() {
    console.log(title, author, pages, read);
  }
}


function addBookToLibrary() {
  // get value from the input text
  var title = document.querySelector('#title').value;
  //append data to the array myLibrary
  myLibrary.push(title);

  var pval = '';

  for (var i in myLibrary) {
    if(myLibrary[i])pval = pval + myLibrary[i] + '<br/>';
  }
}

function render() {
  //display array data
  document.querySelector('.wrapper').innerHTML = pval;
}

Doesnt work. I added the html and css above if you can take another look — Christopher Altamirano, Aug 01 '19 at 03:05

I am trying to write a couple of functions, one that adds a book to a empty array and another function that renders it on the page. Its not working

2 Answers2