Square Generator Prototype Inheritance Colution

by fullyslick

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Square Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<button type="button" id="generateButton">Generate Click</button>
<button type="button" id="showButton">Show result</button>
<button type="button" id="resetButton">Reset</button>
<table id="generator" class="generator"></table>
<script src="app-classing.js"></script>
</body>
</html>

CSS

.generator {
    border-spacing: 5px;
    border-collapse: separate;
}
.generator-square {
    width: 50px;
    height: 50px;
    outline: solid 1px black;
}

.generator-square:hover{
    cursor: pointer;
}

JavaScript

// Task url: https://confluence.ontrq.com/display/KB/Medium+level+-+native+JS/#Mediumlevel-nativeJS-#1:Generatorforsquaresevent

var Generator = (function() {
    'use strict';

    var generator = document.getElementById('generator'),
        generateButton = document.getElementById('generateButton'),
        showButton = document.getElementById('showButton'),
        resetButton = document.getElementById('resetButton'),
        tableRows = 10,
        tableColumns = 10,
        randomClicksAmount = 100,
        dataId = 0,
        allSquares = [];

    // Order of execution is important
    function init() {
        _setSquarePrototypes();
        _createSquares();
        _clickOnSquare();
        _generateClicks();
        _clickOnGenerate();
        _clickOnShowResult();
        _clickOnReset();
    }

    function _Square(node) {
        this.node = node;
        this.clicks = 0;
        this.backgroundColors = {
            100: '#F50202',
            75: '#FC8505',
            50: '#FCCF05',
            25: '#FCF6A9',
            0: '#FFF'
        };
    }

    function _setSquarePrototypes() {
        _Square.prototype.updateBackground = function() {
            for (var bgClicks in this.backgroundColors) {
                if (this.clicks >= bgClicks) {
                    this.node.style.backgroundColor = this.backgroundColors[bgClicks];
                }
            }
        };

        _Square.prototype.updateClicks = function() {
            this.clicks++;
        };

        _Square.prototype.displayClicks = function() {
            this.node.innerText = this.clicks;
        };

        _Square.prototype.reset = function() {
            // Reset clicks to 0
            this.clicks = 0;
            // Update square background to set it to default white
            this.updateBackground();
            // Hide displayed zero clicks
            this.node.innerText = '';
        };
    }

    function _createSquares() {
        // Create the fragment
  ...