Using object fields in JS?

Question

JavaScript

Good day, while studying and deepening in JS, I decided to write a calculator, though not very complicated, but still I ran into a problem: Uncaught ReferenceError: inputData is not defined .

// The main JS File
'use strict';

var action = {
  add: function(a, b) {
    return a + b;
  },
  substract: function(a, b){
    return a - b;
  },
  multiply: function(a, b){
    return a * b;
  },
  devide: function(a, b) {
    return a / b;
  }
}

var tablo = {
  statusLine: " ",
  tabloHtml: document.getElementById("calculator-result"),
  show: function(){
    tabloHtml.innerHTML = statusLine;
  },
  setLine: function(str){
    statusLine = str;
    this.show();
  },
}

var calculator = {
  calc_action: action,
  calc_tablo: tablo,
  inputData: 0,
  action: [],
  digit: [],
  addToData: function(value){
    this.inputData += parseFloat(value);
    this.calc_tablo.setLine(inputData);
    this.logArray("Add to Data:");
  },
  addData: function(value){
    this.inputData = parseFloat(value);
    this.calc_tablo.setLine(inputData);
    this.logArray("Add Data:");
  },
  clearData: function(){
    this.inputData = 0;
  },
  logArray: function(str){
    console.log(str);
    console.log(this.action);
    console.log(this.digit);
  },
}

// Listen Digit button
var listen =  function (){
  var buttonName = this.getAttribute("class");
  calculator.addToData(this.innerHTML);
}

window.onload = function(){
  var buttons = document.querySelectorAll('button')
  for (var i = 0; i < buttons.length; i++){
    buttons[i].addEventListener('click', listen, false);
  }
}

I would appreciate an explanation why, and how to fix it.

Answer 1

You have to guess about the markup, but here's a piece of your "calculator"
assembled. Indeed, in line 39 there this.calc_tablo.setLine(inputData);is inputData not declared.
With tabloHTML and statusLine the situation is similar.
This is how something is already being pressed, but it seems to me that you wanted some other behavior