求助：document.getElementbyID()无法获取<select>元素且bookInfo变量为空

核心问题拆解 #

1. 事件绑定逻辑错误：processInfo函数每次被调用时都会给confirmBtn新增点击事件，导致重复绑定；而且创建newBook的代码写在事件回调外面，会在用户点击前就执行，此时bookInfo还没被赋值，自然为空。
2. 数据存储类型错误：bookInfo被定义为数组，但你实际需要用键值对存储图书信息，应该用对象{}而非数组[]，且不能用DOM元素作为数组/对象的键。
3. 变量未声明导致全局污染：author、title等变量没有用let/const声明，会变成全局变量，引发潜在冲突。
4. 未调用渲染函数：图书添加到myLibrary后，没有调用displayBook来生成页面卡片。
5. 未关闭弹窗：点击确认按钮后，没有关闭添加图书的弹窗，体验不佳。

修正后的完整代码 #

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="logic.js" defer></script>
    <title>Library</title>
    <link rel="stylesheet" href="styles.css" defer>
</head>
<body>
    <div class="header">
        <button class="new">New</button>
    </div>
    <div>
        <dialog id="add-dialog">
            <form>
                <label>Add book</label>
                <input type="text" placeholder="Author" id="author" required>
                <input type="text" placeholder="Title" id="title" required>
                <input type="number" placeholder="Pages" id="pages" min="10">
                <select id="status">
                    <option value="">Select your book status</option>
                    <option value="reading">Reading</option>
                    <option value="completed">Completed</option>
                    <option value="onhold">On-hold</option>
                    <option value="dropped">dropped</option>
                </select>
                <div>
                    <button id='cancel' formmethod="dialog">Cancel</button>
                    <button id="confirmBtn" type="button">Confirm</button>
                  </div>
            </form>
        </dialog>
    </div>
    <div class="card-container"></div>
</body>
</html>

CSS（无需修改）

html{
    height: 100vh;
}

body{
    margin: 0;
    padding: 0;
    height: 100%;
}

.header{
    background-color: blue;
    height: 7%;
    display: flex;
    align-items: center;
}

.new{
    margin-left: 5vw;
    
}

.card-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.book{
    display: flex;
    flex-direction: column;
    width: 20%;
    border: solid;
    margin: 15px;
}

.buttonDiv{
    display: flex;
    justify-content: center;
}

form{
    display: flex;
    align-items: center;
    flex-direction: column;
}

input, select{
    margin: 5px;
}

JavaScript（核心修正）

let myLibrary = [];

function Book(author, title, pages, readStatus) {
    this.author = author;
    this.title = title;
    this.pages = pages;
    this.readStatus = readStatus;
}

function addBooktoLibrary(book) {
    myLibrary.push(book);
}

document.querySelector('.new').addEventListener('click', () => {
    document.getElementById('add-dialog').showModal();
});

document.getElementById('cancel').addEventListener('click', () => {
    document.getElementById('add-dialog').close();
});

function displayBook(bookInfo) {
    const bookElement = document.createElement('div');
    const buttonDiv = document.createElement('div');
    const removeButton = document.createElement('button');
    removeButton.innerText = 'Remove';
    bookElement.innerHTML = `Title: ${bookInfo.title}<br> Author: ${bookInfo.author}<br> Pages: ${bookInfo.pages}<br> Status: ${bookInfo.readStatus}`;
    buttonDiv.appendChild(removeButton);
    buttonDiv.classList.add('buttonDiv');
    bookElement.appendChild(buttonDiv);
    bookElement.classList.add('book');
    removeButton.classList.add('remove');
    document.querySelector('.card-container').appendChild(bookElement);

    // 新增删除功能：移除卡片+从数组中删除对应图书
    removeButton.addEventListener('click', () => {
        bookElement.remove();
        myLibrary = myLibrary.filter(book => book.title !== bookInfo.title);
    });
}

// 一次性绑定确认按钮事件，避免重复绑定
document.getElementById("confirmBtn").addEventListener('click', () => {
    // 声明局部变量，避免全局污染
    const authorInput = document.getElementById("author");
    const titleInput = document.getElementById("title");
    const pagesInput = document.getElementById("pages");
    const statusSelect = document.getElementById('status');

    // 获取选中的状态文本
    const selectedStatusText = statusSelect.options[statusSelect.selectedIndex].text;

    // 用对象存储图书信息
    const bookInfo = {
        author: authorInput.value,
        title: titleInput.value,
        pages: pagesInput.value,
        readStatus: selectedStatusText
    };

    // 创建新书实例并添加到库中
    const newBook = new Book(bookInfo.author, bookInfo.title, bookInfo.pages, bookInfo.readStatus);
    addBooktoLibrary(newBook);

    // 渲染图书卡片
    displayBook(newBook);

    // 关闭弹窗并清空表单
    document.getElementById('add-dialog').close();
    authorInput.value = '';
    titleInput.value = '';
    pagesInput.value = '';
    statusSelect.selectedIndex = 0;
});

额外说明 #

• 移除了HTML中confirmBtn的onclick="processInfo()"，改为在JS中一次性绑定事件，彻底解决重复绑定问题。
• 新增了删除图书的逻辑，点击移除按钮会同时删除页面卡片和数组中的对应数据。
• 确认操作后自动清空表单并关闭弹窗，提升用户操作体验。
• 所有变量均用const/let声明，避免全局变量污染。

内容的提问来源于stack exchange，提问作者Carl Warren