Разрешить javascript обещание на событии DOM

Question

Я искал ответ, но не смог найти ни одного по своей проблеме (или, по крайней мере, я не понимал, как заставить его работать на мою). Поэтому у меня есть эта функция:

Test.prototype.testing = function(){
  return new Promise(function (resolve, reject){
    document.getElementById("element").innerHTML = 
      "<button onclick=\"\">Next</button>";
  });
};

Как разрешить обещание при нажатии кнопки? Заранее спасибо.

Answer 1

Как то так?

function Test() {}

Test.prototype.testing = function(){
  return new Promise(function (resolve, reject){
    const btn = document.createElement("button")
    btn.innerHTML = 'Next'
    btn.addEventListener('click', resolve);
    document.getElementById("element").appendChild(btn)
  });
};

(new Test()).testing()

<div id="element"></div>

Answer 2

Лучшим способом было бы уже иметь кнопку в DOM, а затем ссылаться на нее. На этом этапе просто установить обработчик события onclick на функцию разрешения. (Вы также можете использовать addEventListener, если хотите)

var elBtn = document.getElementById('resolver');
function Test(){ }

Test.prototype.testing = function(){
  return new Promise(function (resolve, reject){
    elBtn.onclick = resolve;
  });
};

var t = new Test();
t.testing().then(x=> {
  console.log('resolved!');
});

<button id='resolver'>Click me!</button>

Answer 3

Вы можете сделать это. С помощью API CustomEvent для среды браузера.

function myPromiseReturningFunction() {
  return new Promise(resolve => {
    window.addEventListener("myCustomEvent", (event) => {
       resolve(event.detail);
    }) 
  })
}

myPromiseReturningFunction().then(result => {
   alert(result)
})

document.getElementById("element").addEventListener("click", () => {
   window.dispatchEvent(new CustomEvent("myCustomEvent", {detail : "It works!"}))
})

<p id="element"> Next </p>