オブジェクトのテキストフィールドからの値の保存、JavaScriptの

Question

オブジェクトをテキストフィールドの値で更新したいとします。

私は問題がボタンのclick eventhandlerにあると思いますが、わかりません。私はいくつかのことを試しました、あなたの助けは素晴らしいでしょう。

私がこれまで持っているものの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）。あなたはそれが変更された更新ブック名毎回を表示したい場合、あなたはあなたでは

bookName.textContent = book.name; 

を追加する必要があるだろう、Jazcashが指摘したようにライン

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

後alert(book.name);を追加することで、これを見ることができますイベントリスナーなので、次のようになります。

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

Answer 2

問題はbookに基づいてdivs textContentをここに設定しています：bookName.textContent = book.name;です。しかし、その後、あなたはそのようなあなたの場合には再びそれを実行する必要があります。

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

あなたのコードが既にからの値を持つオブジェクトのプロパティ（book.name）を更新