Запустить математику снова с новым вводом текстового поля 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() + '%'; 

Для лучшего соответствия кода вы можете рассмотреть вопрос о переносе всех дисплея инкубационные линий в случае щелчка.