In general, the problem is this. I create a class, write output to the console, and output the code twice. What to do?

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')
  }

}

And its main component

export class CoreValid {

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

  init() {}

  idCreate(){}

}

And this is screen

enter image description here

And this is 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>