0

I’m currently building a calculator interface using jQuery and have been running into issues creating my buttons. I was able to build a function to add buttons to the calculator dynamically and was able to successfully create individual buttons, however when I try to create the number buttons using jQuery.each the text displayed on each button is [object HTMLdocument] rather than the actual numbers and I’m unsure how to find a work around. I’ve done a bit of googling and haven’t found any resolution as of yet. If anyone is able to help alleviate my issues or even point me in the right direction, it would be a huge help!

$.fn.addButton = function(html, className, onclick) {
  $('<button />', {
    html: html,
    'class': 'button ' + className,
    click: onclick
    }).appendTo(this);
  return this;
}

var addNumberButton = function(num) {
  $numbers.addButton(num, 'number ' + (num === '.' ? 'dot' : 'number-' + num), () => {
    if($input.text().match(/\./) && num == '.') return;
    if($input.text() == 0 && num != '.' || $input.data('clearOnInput')) {
      $input.text('');
    }
    $input.data({clearOnInput: false});
    $input.text($input.text() + $(this).text());
  })
  };

$.each('7894561230.'.split(''), () => {
  addNumberButton(this.toString())
});

Apologies if my issue isn't articulated well enough, I'm still fairly new to jQuery and JS in general.

Thank you in advance for any help!

Here's a link to the full pen: https://codepen.io/tazmancooks/pen/dyMPOLr

Quentin B
  • 31
  • 5

1 Answers1

2

Found the solution shortly after posting, the issue was the use of 'this' in my .each function

$.each('7894561230.'.split(''), (itm) => {
  addNumberButton(itm.toString())
});
Quentin B
  • 31
  • 5