Home > database >  the elements are cleared after the code runs instead of staying. Any ideas?
the elements are cleared after the code runs instead of staying. Any ideas?

Time：10-27

// stores books
let myLibrary = [];
// the constructor...
function Book(title, author, pages, read, imageURL) {
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.read = read;
  this.imageURL = imageURL;
}
//Function to add new books to the array
function addBookToLibrary(title, author, pages, read, imageURL) {
  let book = new Book(title, author, pages, read, imageURL);
  myLibrary.push(book);
  console.log(myLibrary[0]);
  displayBooksOnPage();
}

//function to display cards in the array
function displayBooksOnPage() {
  const books = document.querySelector(".cards");

  //counter used in the content loop
  let counter = 0;

  //removes previous card before reiteration
  //Create the card for each book in array
  myLibrary.forEach((myLibrary) => {
    const card = document.createElement("div");
    card.classList.add("card");
    books.append(card);

    //Adds all the content into the card
    for (let key in myLibrary) {
      console.log("a");
      if (counter <= 0) {
        const titleHeader = document.createElement("h5");
        titleHeader.textContent = `${myLibrary[key]}`;
        titleHeader.classList.add("card-title");
        card.appendChild(titleHeader);
        counter = 1;
      } else if (counter < 2) {
        const cardAuthor = document.createElement("p");
        cardAuthor.textContent = `${myLibrary[key]}`;
        cardAuthor.classList.add("card-author");
        card.appendChild(cardAuthor);
        counter = 2;
      } else if (counter < 3) {
        const cardPages = document.createElement("p");
        cardPages.textContent = `${myLibrary[key]}`;
        cardPages.classList.add("card-pages");
        card.appendChild(cardPages);
        counter = 3;
      } else if (counter < 4) {
        const readContainer = document.createElement("div");
        readContainer.classList.add("read");
        card.appendChild(readContainer);
        const readElement = document.createElement("p");
        readElement.textContent = `${myLibrary[key]}`;
        readElement.classList.add("card-read");
        readContainer.append(readElement);
        counter = 4;
      } else if (counter < 5) {
        const imageContainer = document.createElement("div");
        imageContainer.classList.add("book-image-container");
        card.appendChild(imageContainer);
        const bookImage = document.createElement("img");
        bookImage.src = `${myLibrary[key]}`;
        bookImage.classList.add("book-image");
        imageContainer.append(bookImage);
        const editContainer = document.createElement("div");
        editContainer.classList.add("edit-container");
        card.appendChild(editContainer);
        const editBtn = document.createElement("button");
        editBtn.innerText = "Edit";
        editBtn.classList.add("edit");
        editContainer.append(editBtn);
        const deleteContainer = document.createElement("div");
        deleteContainer.classList.add("delete-container");
        card.appendChild(deleteContainer);
        const deleteBtn = document.createElement("button");
        deleteBtn.innerText = "Delete";
        deleteBtn.classList.add("delete");
        deleteContainer.append(deleteBtn);
      }
    }

    function resetCounter() {
      counter = 0;
    }
    resetCounter();
  });
}

//New book button
const newBookBtn = document.getElementById("newBookBtn");
newBookBtn.addEventListener("click", displayForm);

//Displays the new book form
function displayForm() {
  document.getElementById("formContainer").style.display = "";
}

//eventlistener on form to submit data
const submitBtn = document.querySelector(".submit-button");
submitBtn.addEventListener("click", intakeFormData);

//transform form data to variables
function intakeFormData() {
  let title = document.getElementById("Title").value;
  let author = document.getElementById("Author").value;
  let pages = document.getElementById("Pages").value;
  let read = document.getElementById("Read").value;
  let imageURL = document.getElementById("imageURL").value;

  addBookToLibrary(title, author, pages, read, imageURL);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script type="text/javascript" src="script.js" defer></script>
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="resetcss.css" />
  <title>Sign-Up Form</title>
</head>

<body id="body">
  <div >
    <div >
      <img  src="./images/view-dashboard-variant-outline.png" alt="" />
      <h1>Dashboard</h1>
    </div>
    <div >
      <img  src="./images/home.png" alt="" />
      <h1>Home</h1>
    </div>
    <div >
      <img  src="./images/account.png" alt="" />
      <h1>Profile</h1>
    </div>
    <div >
      <img  src="./images/message.png" alt="" />
      <h1>Messages</h1>
    </div>
    <div >
      <img  src="./images/clock.png" alt="" />
      <h1>History</h1>
    </div>
    <div >
      <img  src="./images/note-multiple.png" alt="" />
      <h1>Tasks</h1>
    </div>
    <div >
      <img  src="./images/account-group.png" alt="" />
      <h1>Communities</h1>
    </div>
    <!--Needs extra spacing-->
    <div >
      <img  src="./images/cog.png" alt="" />
      <h1>Settings</h1>
    </div>
    <div >
      <img  src="./images/help-circle.png" alt="" />
      <h1>Support</h1>
    </div>
    <div >
      <img  src="./images/shield-check-outline.png" alt="" />
      <h1>Privacy</h1>
    </div>
  </div>
  <div >
    <!--Top section-->
    <div >
      <div >
        <div >
          <img src="./images/magnify.png" alt="" />
        </div>
        <input type="text" name="search" />
      </div>
      <div >
        <div >
          <img src="./images/bell.png" alt="" />
        </div>
        <img  src="./images/avatar.jpg" alt="" />
        <p >Benjamin Gill</p>
      </div>
    </div>
    <!--Bottom section-->
    <div >
      <div >
        <img  src="./images/avatar.jpg" alt="" />
        <div >
          <p >Hi there,</p>
          <p >
            Benjamin Gill <span >(@Bgill)</span>
          </p>
        </div>
      </div>
      <div >
        <button id="newBookBtn" >New Book</button>
      </div>
    </div>
  </div>
  <div >
    <div >
      <h3>Your Books:</h3>
      <div >
        <div >
          <h5 >The Hobbit</h5>
          <p >by: J.R.R. Tolken</p>
          <p >345 pages</p>
          <div >
            <p >Not yet read</p>
          </div>
          <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/The_Hobbit_trilogy_dvd_cover.jpg/220px-The_Hobbit_trilogy_dvd_cover.jpg" alt=""  />
          </div>
          <div >
            <button >Edit</button>
          </div>
          <div >
            <button >Delete</button>
          </div>
        </div>
        <div id="formContainer"  style="display: none">
          <form id="newBookForm" >
            <input type="text" name="Title" id="Title"  placeholder="Book Title..." />
            <input type="text" name="Author" id="Author" placeholder="Author Name..."  />
            <input type="number" name="Pages" id="Pages" placeholder="Amount of Pages..."  />
            <input type="text" name="Read" id="Read" placeholder="Have you read this?"  />
            <input type="text" name="imageURL" id="imageURL" placeholder="Enter image URL..."  />
            <div >
              <button type="reset" >
                  Reset Form
                </button>
            </div>
            <div >
              <button type="submit" >
                  Sumbit to Library
                </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

My main issue is in Javascript. It takes the intakeFormData and then goes through the add newBookToLibrary. Once there it runs the displayBooksOnPage and creates the new card by adding elements to the dom. Once all the elements are added, it finishes at the intakeFormData and then calls the myLibrary. Once it calls the myLibrary it just removes all the newly added elements.

I've looked at chrome dev tools and followed it through. It completed everything correctly. But once it is towards the end it calls the first two variables as when the page loads and it clears everything that was added.

CodePudding user response：

myLibrary is a global variables. Please change it to variabile locale try again.

function addBookToLibrary add a return value. Call it in the function displayBooksOnPage.

CodePudding user response：

I added two things to your intakeFormData() function:

  • an ev.preventDefault() to suppress the actual submission of the form and the opening of an empty page
  • and toggleDisplay() to hide the form after pressing the "Sumbit to Library" button.

toggleDisplay() replaces your original displayForm() function.

My changes will prevent the page and its content from disappearing. I haven't fully understood what you are doing in displayBooksOnPage() but I am sure there are ways of doing the same job in a much simpler way.

// stores books
let myLibrary = [];
// the constructor...
function Book(title, author, pages, read, imageURL) {
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.read = read;
  this.imageURL = imageURL;
}
//Function to add new books to the array
function addBookToLibrary(title, author, pages, read, imageURL) {
  let book = new Book(title, author, pages, read, imageURL);
  myLibrary.push(book);
  console.log(myLibrary[0]);
  displayBooksOnPage();
}

//function to display cards in the array
function displayBooksOnPage() {
  const books = document.querySelector(".cards");

  //counter used in the content loop
  let counter = 0;

  //removes previous card before reiteration
  //Create the card for each book in array
  myLibrary.forEach((myLibrary) => {
    const card = document.createElement("div");
    card.classList.add("card");
    books.append(card);

    //Adds all the content into the card
    for (let key in myLibrary) {
      console.log("a");
      if (counter <= 0) {
        const titleHeader = document.createElement("h5");
        titleHeader.textContent = `${myLibrary[key]}`;
        titleHeader.classList.add("card-title");
        card.appendChild(titleHeader);
        counter = 1;
      } else if (counter < 2) {
        const cardAuthor = document.createElement("p");
        cardAuthor.textContent = `${myLibrary[key]}`;
        cardAuthor.classList.add("card-author");
        card.appendChild(cardAuthor);
        counter = 2;
      } else if (counter < 3) {
        const cardPages = document.createElement("p");
        cardPages.textContent = `${myLibrary[key]}`;
        cardPages.classList.add("card-pages");
        card.appendChild(cardPages);
        counter = 3;
      } else if (counter < 4) {
        const readContainer = document.createElement("div");
        readContainer.classList.add("read");
        card.appendChild(readContainer);
        const readElement = document.createElement("p");
        readElement.textContent = `${myLibrary[key]}`;
        readElement.classList.add("card-read");
        readContainer.append(readElement);
        counter = 4;
      } else if (counter < 5) {
        const imageContainer = document.createElement("div");
        imageContainer.classList.add("book-image-container");
        card.appendChild(imageContainer);
        const bookImage = document.createElement("img");
        bookImage.src = `${myLibrary[key]}`;
        bookImage.classList.add("book-image");
        imageContainer.append(bookImage);
        const editContainer = document.createElement("div");
        editContainer.classList.add("edit-container");
        card.appendChild(editContainer);
        const editBtn = document.createElement("button");
        editBtn.innerText = "Edit";
        editBtn.classList.add("edit");
        editContainer.append(editBtn);
        const deleteContainer = document.createElement("div");
        deleteContainer.classList.add("delete-container");
        card.appendChild(deleteContainer);
        const deleteBtn = document.createElement("button");
        deleteBtn.innerText = "Delete";
        deleteBtn.classList.add("delete");
        deleteContainer.append(deleteBtn);
      }
    }

    function resetCounter() {
      counter = 0;
    }
    resetCounter();
  });
}

//New book button
const newBookBtn = document.getElementById("newBookBtn");
newBookBtn.addEventListener("click", toggleForm);

//Displays the new book form
function toggleForm() {
  const fstyle=document.getElementById("formContainer").style;
  fstyle.display=fstyle.display==""?"none":"";
}

//eventlistener on form to submit data
const submitBtn = document.querySelector(".submit-button");
submitBtn.addEventListener("click", intakeFormData);

//transform form data to variables
function intakeFormData(ev) {
  ev.preventDefault();
  toggleForm();
  let title = document.getElementById("Title").value;
  let author = document.getElementById("Author").value;
  let pages = document.getElementById("Pages").value;
  let read = document.getElementById("Read").value;
  let imageURL = document.getElementById("imageURL").value;

  addBookToLibrary(title, author, pages, read, imageURL);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script type="text/javascript" src="script.js" defer></script>
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="resetcss.css" />
  <title>Sign-Up Form</title>
</head>

<body id="body">
  <div >
    <div >
      <img  src="./images/view-dashboard-variant-outline.png" alt="" />
      <h1>Dashboard</h1>
    </div>
    <div >
      <img  src="./images/home.png" alt="" />
      <h1>Home</h1>
    </div>
    <div >
      <img  src="./images/account.png" alt="" />
      <h1>Profile</h1>
    </div>
    <div >
      <img  src="./images/message.png" alt="" />
      <h1>Messages</h1>
    </div>
    <div >
      <img  src="./images/clock.png" alt="" />
      <h1>History</h1>
    </div>
    <div >
      <img  src="./images/note-multiple.png" alt="" />
      <h1>Tasks</h1>
    </div>
    <div >
      <img  src="./images/account-group.png" alt="" />
      <h1>Communities</h1>
    </div>
    <!--Needs extra spacing-->
    <div >
      <img  src="./images/cog.png" alt="" />
      <h1>Settings</h1>
    </div>
    <div >
      <img  src="./images/help-circle.png" alt="" />
      <h1>Support</h1>
    </div>
    <div >
      <img  src="./images/shield-check-outline.png" alt="" />
      <h1>Privacy</h1>
    </div>
  </div>
  <div >
    <!--Top section-->
    <div >
      <div >
        <div >
          <img src="./images/magnify.png" alt="" />
        </div>
        <input type="text" name="search" />
      </div>
      <div >
        <div >
          <img src="./images/bell.png" alt="" />
        </div>
        <img  src="./images/avatar.jpg" alt="" />
        <p >Benjamin Gill</p>
      </div>
    </div>
    <!--Bottom section-->
    <div >
      <div >
        <img  src="./images/avatar.jpg" alt="" />
        <div >
          <p >Hi there,</p>
          <p >
            Benjamin Gill <span >(@Bgill)</span>
          </p>
        </div>
      </div>
      <div >
        <button id="newBookBtn" >New Book</button>
      </div>
    </div>
  </div>
  <div >
    <div >
      <h3>Your Books:</h3>
      <div >
        <div >
          <h5 >The Hobbit</h5>
          <p >by: J.R.R. Tolken</p>
          <p >345 pages</p>
          <div >
            <p >Not yet read</p>
          </div>
          <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/The_Hobbit_trilogy_dvd_cover.jpg/220px-The_Hobbit_trilogy_dvd_cover.jpg" alt=""  />
          </div>
          <div >
            <button >Edit</button>
          </div>
          <div >
            <button >Delete</button>
          </div>
        </div>
        <div id="formContainer"  style="display: none">
          <form id="newBookForm" >
            <input type="text" name="Title" id="Title"  placeholder="Book Title..." />
            <input type="text" name="Author" id="Author" placeholder="Author Name..."  />
            <input type="number" name="Pages" id="Pages" placeholder="Amount of Pages..."  />
            <input type="text" name="Read" id="Read" placeholder="Have you read this?"  />
            <input type="text" name="imageURL" id="imageURL" placeholder="Enter image URL..."  />
            <div >
              <button type="reset" >
                  Reset Form
                </button>
            </div>
            <div >
              <button type="submit" >
                  Sumbit to Library
                </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Page link：https//www.codepudding.com/database/589970.html

Prev:Removing extra <p> tags inside the class if it is more than 1 using JavaScript
Next:JavaScript loop through array of Object
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding