If statement condition problem javascript

Question

I have an object containing quotes.
I want my code to print only 5 quotes but the if statement is skipped (I think), and it keeps on printing quotes until it ends. I want to know where the problem is.
Maybe it's in the if statement or comparison or condition or variable scope.
I've tried every possible way to compare i and r but it's simply not working.
I'm just starting out with js. Any help is appreciated.

let i = 0;
let r = 3; 

function printQuote() {
  
  item = data.notes[i];// data is my object having 15 quotes
  
  $('.quote-content').html(item.quote); 
  $('.quote-book').html(item.title);
  $('.quote-author').html(item.author);

  i+=1;
}

document.getElementById('next_button').innerHTML = 'Next Quote';

function getQuote() {
  var $button = $('.next');

  printQuote();
  
  if(parseInt(i,10)>parseInt(r,10)){
    window.alert('No more Quotes to show.');
    $button.disabled = True;
  }
  else{  
    $button.on('click', printQuote);
  }
}

$(document).ready(function() {
  getQuote();
});

List item

Answer 1

The problem is that your getQuote method is only called once when the document is ready. After that, only the printQuote method is called when your button is clicked since that's the listener you attached. So when you click the button, the quote data is set and i is incremented by one - that's all. I assume you'd want to move your i and r comparison logic to inside printQuote or have the getQuote method called when the button is clicked.