用新的文本框輸入Javascript再次運行數學計算器

Question

如何在此代碼中再次運行我的數學運算？

我有我的文本字段更新時，沒有涉及數學。我認爲這是按我的代碼順序。

任何幫助將非常感激。

HTML

<div class="center"> 
    <h2>Book Counter</h2> 
    <form> 
     <label><p>Book Name: </p></label> 
     <input name="booktitle" id="booktitle" type="text"> 
     <label><p>Total Pages: </p></label> 
     <input name="total-pages" id="total-pages" type="text"> 
     <label><p>Current Page: </p></label> 
     <input name="pages" id="pages" type="text"> 
     <button id="my-btn" type="button">SUBMIT</button> 
    </form> 
</div> 

<div id="info"> 
    <h2>Book Info</h2> 
    <div id="bookName"></div> 
    <div id="totalPages"></div> 
    <div id="pagesLeft"></div> 
    <p>Pages Remaining.</p> 
    <div id="percentageLeft"></div> 
    <p>Remaining.</p> 
</div> 

JS

(function() { 


// pull value from text field and set to object 



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

     book.totalPages = document.getElementById('total-pages').value; 
     totalPages.textContent = 'Total Pages: ' + book.totalPages; 

     book.pages = document.getElementById('pages').value; 
     book.pages.textContent = book.pages; 
    }); 

// Create book object 

var book = { 

name: 'Tom & Jerry', 
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() + '%'; 

}()); 

我加太codepen。 http://codepen.io/Middi/pen/pRGOVW

感謝您的任何幫助提前。

Answer 1

JQuery沒有摘要循環，所以函數不會被更新。你需要這個進入您的單擊事件：

pagesLeft.textContent = book.pagesLeft(); 
percentageLeft.textContent = book.percentageLeft() + '%'; 

爲了獲得更好的代碼的一致性，你可能要考慮所有的顯示二傳手線移動到點擊事件。