Как добиться последовательности выполнения кода?

Question

[LoveCodeandCoffe]

Этот класс в качестве id имеет id кнопки

class Navbutton extends Component {
  constructor(id) {
    super(id)
  }
  init() {
    
    this.$el.addEventListener('click', Productshow, buttonHandler.bind(this))
   


  }
}

при клике выполняется функция Productshow которая добавляет эллемент div id all-product и эту же кнопку

let havediv = false
if(!havediv){
  function Productshow()  {

    document.querySelector('body').innerHTML = " "
  document.querySelector('body').innerHTML = `
  <div id="nuv-button">
  <h1>Компьютеры</h1>
  <button class=" btn btn-show"  value="show">Мои Компьютеры</button>
 </div>  
  <div  id="all-product" class="hide visible">

  </div>`

  console.log(document.querySelector('#all-product'))
havediv = true
}
}

Также есть класс Product в котором есть метод init и onshow который добавляет html уже в созданный add-product.

class Products extends Component {
  constructor(id) {
    super(id)
  }
if(){

}
  init() {

     this.$el.addEventListener('click', buttonHandler.bind(this))

  console.log(document.querySelector('#all-product'))
   
  

  }

  async onShow() {
     
     this.$el.innerHTML = " "
     this.$el.innerHTML = `<table class="table-poduct" border="1" cellspacing="0"
    cellpadding="6">
    <thead>
        <tr>
             <td>Тип</td>
            <td> модель</td>
            <td>производитель</td>
            <td> процессор</td>
            <td>Количество ядер</td>
            <td>частота</td>
            <td> поддержка Hyper-Threading</td>
            <td> производитель видеокарты</td>
            <td>видеокарта</td>
            <td>оперативная память</td>
            </tr>
    </thead>
    <tbody id="body-item">
     
    </tbody>
    
      
    </table>
    <button class="btn btn-add" value="add">Добавить</button>`
    const tbody = this.$el.querySelector('#body-item')
    const fbData = await apiService.fetchComputer()
    const computers = TransformService.fbObjectToArray(fbData)
    let html = computers.map(computer => renderComputers(computer))

    tbody.innerHTML = " "
    tbody.innerHTML = html.join(' ')
  }
  isVisible() {
    if (products.$el.hasClass('visible')) {
      tbody.innerHTML = ''
    }
  }

}

const products = new Products('all-product')

И тут все завязано от id-шника. Метод init вызывается сразу до того как отработает клик по кнопке и выполниться функция Productshow. Соответственно this.$el = null
Как добиться того, чтобы метод inеit выполнялся после выполнения функции Productshow?

Comments

[Александр N++]

Почему у вас код is visible выполняет что то.

Методы c приставками сan/is должны возвращать bool тип.

Answer 1

[Сергей]

Попробуй добавить init условие проверки на выполнение productshow. Что-то вроде "если элемент all-product появился, то init выполняется.

Или попробовать callback функцию. Если она тут уместна.

Answer 2

[alex-1917]

А разве не так надо:

var a = document.createElement('a');
a.href = arr[i].href;
a.textContent = arr[i].name;
a.addEventListener('click', func);
products.appendChild(a);

function func(e) {
	e.preventDefault();
//ваша функция
}