javascript - 将文本字段中的值存储在对象中，Javascript

Question

我想用文本字段中的值更新我的对象。

我认为问题出在按钮上的点击事件处理程序上，但不确定。我已经尝试了一些方法，你的帮助会很棒。

HTML

<form>
    <label><p>Book Name: </p></label>
    <input name="booktitle" id="booktitle" type="text" value="I'm a value">
    <label><p>Total Pages: </p></label>
    <input type="text">
    <label><p>Current Page: </p></label>
    <input type="text">
    <button id="my-Btn" type="button">Add to List</button>
</form>

JS

(function() {
// Create book object

var book = {

    name: 'JavaScript & jQuery',
    totalPages: 622,
    pages: 162,
    pagesLeft: function() {
        var total = this.totalPages - this.pages;
        return total;
    },
    percentageLeft: function() {
        var totalPercentage = this.pagesLeft() / this.totalPages * 100
        return Math.round(totalPercentage);
    }
};

// write out book name and pages info

var bookName, totalPages, pagesLeft, percentageLeft; //declares variables

bookName = document.getElementById('bookName'); // gets elements from document
totalPages = document.getElementById('totalPages');
pagesLeft = document.getElementById('pagesLeft');
percentageLeft = document.getElementById('percentageLeft');

bookName.textContent = book.name; // write to document
totalPages.textContent = 'Total Pages: ' + book.totalPages;
pagesLeft.textContent = book.pagesLeft();
percentageLeft.textContent = book.percentageLeft() + '%';

// pull value from text field and set to object

document.getElementById("my-Btn").addEventListener("click", function() {
    book.name = document.getElementById('booktitle').value;
});

}());

我目前拥有的代码笔。

http://codepen.io/Middi/pen/pRGOVW

提前致谢。

Answer 1

您的代码已经使用文本字段 (#booktitle) 中的值更新对象的属性 (book.name)。您可以通过在该行之后添加 alert(book.name); 来查看这一点

book.name = document.getElementById('booktitle').value;

正如 Jazcash 指出的那样，如果您想在每次更改书名时都显示更新后的书名，则需要添加

bookName.textContent = book.name;

在你的事件监听器中，它看起来像这样:

document.getElementById("my-Btn").addEventListener("click", function() {
    book.name = document.getElementById('booktitle').value;
    bookName.textContent = book.name;
});