时间戳

首页 > 解决方案 > 请求帮助对 HTML 表单/卡片进行故障排除

javascript - 请求帮助对 HTML 表单/卡片进行故障排除

问题描述

我目前正在做一个 HTML/CSS/JS 练习。前提是图书馆网站。我的想法是我有一个可折叠的表单，部署后允许用户输入书名、作者和页码。单击提交时，它会接受用户输入并在网页上生成一个 html 卡片。此标题卡将显示用户输入信息以及一个滑块以表示它是否已被读取。

我的代码中生成了一些测试卡，可以按预期创建卡，但是当使用 html 表单时，我似乎无法创建额外的卡。我对控制台进行了一些测试，以确保表单实际上正在捕获用户输入并分配它。

如果有人能指出我正确的方向，那就太棒了。我已经在这个问题上搞砸了将近 2 周，但没有运气。我有一种感觉，我的“电线”没有在 javascript 中正确连接。先感谢您。

Javascript：

// set up library 
let myLibrary = [];

//set up object
function Book(title, author, pages) {
    this.title = title;
    this.author = author;
    this.pages = pages;
}

//add object to library
function addBookToLibrary(Book){
    myLibrary.push(Book);
}

//test books
const lotr = new Book('The Fellowship of the Ring', 'J.R.R. Tolkein', '423 pages');
const ender = new Book('Enders Game', 'Orson Scott Card', '324 pages');
const martian = new Book('The Martian', 'Anthony Weir', '369 pages');


addBookToLibrary(lotr);
addBookToLibrary(ender);
addBookToLibrary(martian);

//inject html to create cards
let htmlCode = ``;


myLibrary.forEach(function(singleBookObjects){
    htmlCode = 
      htmlCode + 
      `
      <entry>
          <div>
          <h3>Title: ${singleBookObjects.title}</h3>
          <h3>Author: ${singleBookObjects.author}</h3>
          <h3>Pages: ${singleBookObjects.pages}</h3>
          <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
          </label>  
          </div>
      </entry>
      `;
  });



function newBookCard() {
    let newdiv = document.createElement('div');
    newdiv.className+= 'item';

    let newp = document.createElement('p');
    newp.innerHTML = "Title";

    newdiv.appendChild(newp);
    document.getElementById('main').appendChild(newdiv);
}


const addBtn = document.getElementById("submit");
addBtn.onclick = function() {
    let a = document.getElementById("bookTitle").value
    let b = document.getElementById("bookAuthor").value
    let c = document.getElementById("bookPages").value
    let newBook = new Book(a, b, c);
    
    addBookToLibrary(newBook);
    console.log(myLibrary);

    newBookCard();

    document.getElementById("bookTitle").value = ""
    document.getElementById("bookAuthor").value = ""
    document.getElementById("bookPages").value = ""
}


const bookCards = document.querySelector(".all-book-cards");
bookCards.innerHTML = htmlCode;


function openForm() {
    document.getElementById("myForm").style.display = "block";
}

function submitForm(){
    let a = document.getElementById("bookTitle")
}


function closeForm() {
    document.getElementById("myForm").style.display = "none";
}

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Library</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
        <div id = "container" img src="images/bookShelf.jpeg">
            <div id = "titleCard"> My Library</div>
            <div class = "all-book-cards"></div>

            <button class="open-button" onclick="openForm()">Add Book</button>
            <div class="form-popup" id="myForm">
                <form action="index.html" class="form-container">
                    <h1>Add Book</h1>

                    <label for="bookTitle"><b>Title:</b></label>
                    <input id="bookTitle" type="text" placeholder="Enter Title" name="bookTitle" required>

                    <label for="bookAuthor"><b>Author:</b></label>
                    <input id="bookAuthor" type="text" placeholder="Enter Author" name="bookAuthor" required>

                    <label for="bookPages"><b>Pages:</b></label>
                    <input id="bookPages" type="text" placeholder="Enter Pages" name="bookPages" required>

                    <button id="submit" type="button" class="btn">Add</button>
                    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
                </form>
            </div>

        </div>
        <script src ="script.js"></script>
    </body>
</html>

CSS

.all-book-cards{
    width: 20em;
    display: flex;
    flex-direction: column;
}


entry {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border: black;
    border-width: 3px;
    border-style: groove;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 2px;
   
}

{box-sizing: border-box;}


.open-button {
    background-color: #555;
    color: white;
    padding:16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 90px;
}


.form-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 15px;
    border: 3px solid #f1f1f1;
    z-index: 9;
}

.form-container {
    max-width: 300px;
    padding: 10px;
    background-color: white;
}


.form-container input[type=text] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
}

.form-container input[type=text]:focus {
    background-color: rgb(161, 161, 161);
    outline: none;
}

.form-container .btn {
    background-color: #04AA6d;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    opacity: 0.8;
}

.form-container .cancel {
    background-color: red;
}

.form-container .btn:hover, .open-button:hover {
    opacity: 1;
}



/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

标签： javascripthtmlcss

解决方案

您的代码存在一些问题，但您在 DOM 中看不到任何更改的主要原因是您尝试通过 id "main" 查找元素，但没有定义这样的元素。

因此，第一步是在包含您的书籍的元素上添加一个 id：

<div id="main" class="all-book-cards"></div>

另一个问题是您在 javascript 代码中的许多地方以不同的方式更改 DOM，这使得弄清楚发生了什么变得更加困难。您也可以更改addBookToLibrary为实际向 DOM 添加元素。为了确保与您在 for 循环中创建的初始书籍保持一致，我更改了 addBookToLibrary 以处理整个创建过程并删除了 for 循环。

//add object to library
function addBookToLibrary(Book){
    myLibrary.push(Book);
    let html =  `
      <entry>
          <div>
          <h3>Title: ${Book.title}</h3>
          <h3>Author: ${Book.author}</h3>
          <h3>Pages: ${Book.pages}</h3>
          <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
          </label>  
          </div>
      </entry>
      `;
  var newEl = document.createElement("template");
  newEl.innerHTML = html.trim();
  document.getElementById('main').appendChild(newEl.content.firstChild);
}

下面是完整示例的 CodePen。

https://codepen.io/rasm586c/pen/PoKdNdd

推荐阅读