從對象中的文本字段存儲值，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

您的代碼已經從一個值更新一個對象的屬性（book.name）一個文本字段（#booktitle）。您可以通過該行後加入alert(book.name);看到這個

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

由於Jazcash指出，如果你想顯示更新的書籍名稱，每次它被改變，你需要添加

bookName.textContent = book.name; 

在你eventlistener，所以它看起來像這樣：

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

Answer 2

問題是你設置你的div textContent基於book在這裏：bookName.textContent = book.name;。但是，那麼你需要在你的事件再次做到這一點，像這樣：

book.name = bookName.value; 
bookName.textContent = book.name; 

你需要爲所有的領域

做到這一點