It produces this kind of error. Googled, found out that it occurs when you try to call a function as a constructor, but this is not a constructor.

But it is not so in this case. What am I doing wrong?

TypeError: Electron.inita is not a constructor

; (function() { var arbitals = document.querySelectorAll('.animate-electron__arbital'); function randomNumInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } function addElectrons(electronCount, arbitals, arbitalNum, startCardinats) { var electron = document.createElement('div'); electron.classList.add('animate-electron__electron'); electron.style.width = randomNumInt(45, 55) + 'px'; var electronWidth = getComputedStyle(electron).width; electron.style.height = electronWidth; arbitals[arbitalNum].appendChild(electron); } function Electron() { this.degrees = randomNumInt(0, 20); this.arbital = arbitals[randomNumInt(0, 3)]; this.item = document.createElement('div'); this.itemCreate = function() { this.item.classList.add('animate-electron__electron'); this.item.style.width = randomNumInt(45, 55) + 'px'; var electronWidth = getComputedStyle(this.item).width; this.item.style.height = electronWidth; this.arbital.appendChild(this.item); } this.itemRun = function() { var diametr = parseFloat(getComputedStyle(this.arbital).width); this.item.style.right = diametr / 2 - Math.cos(this.degrees) * diametr / 2 + 'px'; this.item.style.bottom = diametr / 2 - Math.sin(this.degrees) * diametr / 2 + 'px'; var moving = setInterval(function() { this.degrees += 0.2; this.item.style.right = diametr / 2 - Math.cos(this.degrees) * diametr / 2 + 'px'; this.item.style.bottom = diametr / 2 - Math.sin(this.degrees) * diametr / 2 + 'px'; }.bind(this), 500) } this.inita = function() { this.itemCreate(); this.itemRun(); } } new Electron.inita(); }()) 
 * { margin: 0; padding: 0; box-sizing: border-box; outline: none; font-family: 'Roboto', sans-serif; } /*Header*/ .header { height: 79px; } .top-menu { position: absolute; padding: 30px 0; padding-left: 80px; } .top-menu__item { display: inline-block; margin-left: 46px; } .top-menu__link { font-size: 16px; color: #475055; text-decoration: none; transition: 0.3s; } .top-menu__link:hover { color: #56ccc8; } .left-menu-button { background-color: #56ccc8; position: absolute; left: 0; height: 100%; width: 80px; top: 0; cursor: pointer; } .left-menu-button:hover .left-menu-button__row:nth-child(2) { margin: 8px 0; } .left-menu-button__icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .left-menu-button__row { width: 30px; height: 2px; background-color: #fff; } .left-menu-button__row:nth-child(2) { margin: 6px 0; transition: .3s; } .left-menu { position: absolute; left: 0; bottom: 0; transform: translateX(-100%); width: 300px; height: calc(100% - 79px); background-color: white; transition: .5s; z-index: 100; } .left-menu--active { transform: translateX(0%); } .left-menu h2 { color: #475055; font-size: 18px; font-weight: 400; text-transform: uppercase; margin: 30px 0; margin-left: 16px; display: block; } .left-menu__list { list-style: none; } .left-menu__item {} .left-menu__link { padding: 16px; display: block; color: #475055; font-size: 16px; text-decoration: none; border-bottom: 1px solid #e1e5e7; transition: .3s; } .left-menu__link:hover { background-color: #56ccc8; color: #fff; } /*Main section*/ .main { height: calc(100vh - 79px); background-color: #c5cdd1; position: relative; } .game-block { position: absolute; top: 0; height: 100%; width: 65%; overflow: hidden; } .game-block:first-child { background-color: #81ecec; left: 0; clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%); } .game-block:last-child { background-color: #00cec9; right: 0; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); } .animate-electron { position: absolute; left: 30%; top: 50%; transform: translate(-50%, -50%); width: 40%; perspective: 600px; transform-style: preserve-3d; } .animate-electron:before { content: ''; display: block; padding-top: 100%; } .animate-electron__core { width: 30%; height: 30%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: #56ccc8; animation: coreAnimation 3s ease infinite; } @keyframes coreAnimation { 0% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -60%); } 100% { transform: translate(-50%, -50%); } } .animate-electron__arbitals {} .animate-electron__arbital { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; border: 6px solid #56ccc8; transform-style: flat; } .animate-electron__arbital:first-child { transform: rotateY(70deg) rotateZ(20deg); } .animate-electron__arbital:nth-child(2) { transform: rotateY(60deg) rotateX(60deg) rotateZ(-30deg); } .animate-electron__arbital:last-child { transform: rotateY(-60deg) rotateX(60deg) rotateZ(100deg); } .animate-electron__electron { background-color: #b2bec3; border-radius: 50%; transform: translate(50%, 50%); position: absolute; transition: 0.5s linear; } 
 <header class="header"> <div class="top-menu"> <div class="left-menu-button"> <div class="left-menu-button__icon"> <div class="left-menu-button__row"></div> <div class="left-menu-button__row"></div> <div class="left-menu-button__row"></div> </div> </div> <nav class="top-menu__navigation"> <ul class="top-menu__list"> <li class="top-menu__item"> <a href="#" class="top-menu__link">Главная</a> </li> <li class="top-menu__item"> <a href="#" class="top-menu__link">Источники</a> </li> <li class="top-menu__item"> <a href="#" class="top-menu__link">Правила игр</a> </li> </ul> </nav> </div> <nav class="left-menu"> <h2>Игры</h2> <div class="left-menu__item"> <a href="#" class="left-menu__link">Электрон</a> </div> <div class="left-menu__item"> <a href="#" class="left-menu__link">Лаборатория</a> </div> </nav> </header> <main class="main"> <a href="#" class="game-block"> <div class="animate-electron"> <div class="animate-electron__arbitals"> <div class="animate-electron__arbital"></div> <div class="animate-electron__arbital"></div> <div class="animate-electron__arbital"></div> </div> <div class="animate-electron__core"></div> </div> </a> <a href="#" class="game-block"></a> </main>

    1 answer 1

    This expression

     new Electron.inita();

    considered as new (Electron.inita)(); , that is, first there is an attempt to get the inita property and only then use it as a constructor.

    Since the Electron function does not have such a property, a regular error is obtained.

    You can play a simple example:

     function A() {} new Aa();

    In order for this property to appear, you need to call the Electron function as a constructor:

     new Electron().inita()

    or frame brackets: (new Electron).inita()

     function A() { this.a = function() { console.log('a') } } new A().a(); (new A).a();