Question

我有一个包含函数的对象文字。我收到错误“无法设置未定义的属性标题”。在下面的editBook函数中，我想将pElement的内部文本存储为对象的title属性（查找注释：“//将p的编辑值存储为object中的标题键”）。

//store p's edited value as the title key in object
  var object = library.books[index];
  object.title = pElement.innerText;

我尝试使用0代替索引函数，当我添加一本书并编辑它时，一切都很顺利。当我输入我的函数时，它并没有说该函数存在问题，但是它无法设置undefined的属性。我不知道我的索引功能是否存在问题，或者是否还有其他问题。

var addButton = document.querySelector("#add");
var searchButton = document.querySelector("#search");
var titleInput = document.querySelector("#title");
var display = document.querySelector("#display");


function Book(title) {
    this.title = title;
}

function Library() {
    this.books = [];
}

Library.prototype.add = function(book) {
        this.books.push(book);
}

//btw library.books is an array of objects
var library = new Library();

//Library UI
var libraryUI = {
    //Add a new book
    addBook: function() {
        display.innerHTML = "";
        var newBook = libraryUI.createNewBook(titleInput.value);
        library.add(newBook);
        //log the books for console reasons
        console.log(library.books);
        titleInput.value = "";
    },
    //Create a new book
    createNewBook: function(title) {
        var book = new Book(title);
        return book;
    },
    //Search for a book
    searchBook: function() {
        display.innerHTML = "";
        var search = titleInput.value;
        for (var i = 0; i < library.books.length; i++) {
            var book = library.books[i];
            if (book.title === search) {
                var bookResult = book.title;

                //create editButton, deleteButton and p element
                var editButton = document.createElement("button");
                var deleteButton = document.createElement("button");
                var pElement = document.createElement("p");

                //modify elements
                editButton.innerText = "Edit";
                deleteButton.innerText = "Delete";
                editButton.className = "edit";
                deleteButton.className = "delete";

                pElement.className = "displayResult";
                pElement.innerHTML = bookResult;

                //display result and append buttons
                display.appendChild(pElement);
                display.appendChild(editButton);
                display.appendChild(deleteButton);

                //bind events to new buttons
                libraryUI.bindEvents();
            }
        }
    },
    //delete a book
    deleteBook: function() {
        //Access the book's index value in the array

            //Remove the book from the array

    },
    //edit a book
    editBook: function() {
        var pElement = document.querySelector(".displayResult"); //p element
        var displayDiv = document.querySelector("#display"); //div element
        var editButton = document.querySelector(".edit");
        var containsClass = pElement.classList.contains("editMode");
        var index = libraryUI.findIndex(library.books, pElement);

        //If class of p is editMode
        if (containsClass) {
            var input = document.querySelector(".inputEl");

            //switch from editMode (remove class)
            pElement.classList.toggle("editMode");

            //p's value becomes the label's text
            pElement.innerText = input.value;

            //remove input element
            display.removeChild(input);

            //switch "Save" to "Edit"
            editButton.innerText = "Edit";

            //store p's edited value as the title key in object
            var object = library.books[index];
            object.title = pElement.innerText;

        } else {
            //switch to editMode
            pElement.classList.toggle("editMode");

            //create input element
            var inputEl = document.createElement("input");

            //modify elements
            inputEl.type = "text";
            inputEl.className = "inputEl";

            //append input element
            display.insertBefore(inputEl, display.childNodes[0]);

            //input value becomes p's text
            inputEl.value = pElement.innerText;

            //switch "Edit" to "Save"
            editButton.innerText = "Save";
        }   
    },
    //bind events
    bindEvents: function() {
        var editButton = document.querySelector(".edit");
        var deleteButton = document.querySelector(".delete");

        editButton.onclick = libraryUI.editBook;
        deleteButton.onclick = libraryUI.deleteBook;
    },
    //find the index of a book in library
    findIndex: function(array, title) {
        for (var i = 0; i < array.length; i++) {
            if (array[i].title == title)
                return i;
        }
        return -1;
    }

};

addButton.addEventListener("click", libraryUI.addBook);
searchButton.addEventListener("click", libraryUI.searchBook);

HTML：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Library App</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

        <h1>Personal Library</h1>

        <label for="title">Title: </label>
        <input type="text" id="title">

        <button id="add">Add</button>
        <button id="search">Search</button>

        <div id="display">

        </div>

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

Answer 1

在editBook中，您正在搜索“.displayResult”段落元素而不是段落中的文本，因此libraryUI.findIndex找不到匹配的元素并返回-1（这就是您尝试设置标题的原因） 'undefined'）。

这一行：

var index = libraryUI.findIndex(library.books, pElement);

应该是：

var index = libraryUI.findIndex(library.books, pElement.innerText);

无法设置undefined的属性标题

1 个答案: