En general, el problema es este. Creo una clase, escribo el resultado en la consola y emito el código dos veces. ¿Qué hacer?

 import { CoreValid } from "./core.component" export class Validator extends CoreValid { constructor(elementId, btn, dataName) { super(btn) this.$dataName = dataName this.$el = document.querySelector(elementId) } init() { this.$btn.addEventListener('click', this.haha.bind(this)) } haha(event) { event.preventDefault() console.log('one') } }

y su principal componente

 export class CoreValid { constructor(btn) { this.$btn = document.querySelector(btn) this.init() this.idCreate() } init() {} idCreate(){} }

Y esta es la pantalla

ingrese la descripción de la imagen aquí

Y esto es HTML

 <form action=""> <input type="text" class="main-input" placeholder="Title" data-nav="title" id="1" name=""> <div class="block-colors"> <input type="text" data-nav="color" placeholder="RGB" id="2"> </div> <button class="submit">Submit</button> </form>