检查按钮是否被点击答案

【问题标题】：Checking if button clicked检查按钮是否被点击
【发布时间】：2021-03-08 11:21:09
【问题描述】：

是否可以检查按钮事件是否（条件）onclick？因为如果用户点击弹出按钮，我想返回一个值

function showPopup(){
    popup.style.visibility = "visible";
    popupButton.onclick = ()=>{
        popup.style.visibility = "hidden";
    }
    popupClose.onclick = () => {
        popup.style.visibility = "hidden";
    }  
}

【问题讨论】：

什么时候返回值？来自 showPopup 方法？如果是这样，那么没有。因为该方法使事件处理程序稍后发生。单击“稍后”时，该方法已经结束。
你的问题不清楚。你能解释一下你在找什么吗？
@Taplar 我明白了！谢谢你有什么想法吗？
@PraneetDixit 我只想在点击 popupButton 时返回一个真实值
从什么方法返回真值？

标签： javascript html jquery dom ecmascript-6

【解决方案1】：

我建议你这样做

window.addEventListener("load", () => {
  document.getElementById("popBut").addEventListener("click", e => {
    console.log("Open button clicked"); // here you can call something 
    document.getElementById("popup").classList.remove("hide");
  })
  document.querySelector("#popup div.close").addEventListener("click", e => {
    console.log("Close button clicked"); // here you can call something 
    document.getElementById("popup").classList.add("hide");
  })

})

.hide {
  display: none;
}

#popup {
  height: 100px;
  width: 100px;
  background-color: yellow;
  border: 1px solid black;
}

.close {
  display: inline-block;
  float: right
}

<button type="button" id="popBut">Show</button>

<div id="popup" class="hide"><div class="close">X</div>Here is a popup </div>

【讨论】：

可能是因为你没有真正回答问题......
@epascarello 也许现在？

【解决方案2】：

您正试图从异步调用中读取返回值。当返回触发时，其他代码已经完成运行。您需要使用 promise 并让其他代码在执行之前等待响应。

function askQuestion() {
  return new Promise(function(resolve, reject) {

    const msg = document.getElementById("msg");
    const btnYes = document.getElementById("btnYes");
    const btnNo = document.getElementById("btnNo");

    const cleanUp = function() {
      msg.classList.remove("active");
      btnYes.removeEventListener("click", yesFnc);
      btnNo.removeEventListener("click", noFnc);
    }

    const yesFnc = function() {
      resolve(true);
      cleanUp();
    }
    const noFnc = function() {
      resolve(false);
      cleanUp();
    }

    btnYes.addEventListener("click", yesFnc);
    btnNo.addEventListener("click", noFnc);
    msg.classList.add("active");


  });
}

function example1 () {
  askQuestion().then(function(result){
    console.log("The answer was: ", result);
  });
}


async function example2 () {
  const result = await askQuestion()
  console.log("The answer was: ", result);
}

document.getElementById("test1").addEventListener("click", example1);
document.getElementById("test2").addEventListener("click", example2);

#msg {
  display: none;
  position: absolute;
  top: 0; left: 0;
  background-color: #CCC;
  border: 1px solid black;
  width: 300px;
  padding: 1em;
}

#msg.active {
  display: block;
}

<button id="test1">Example 1</button>
<button id="test2">Example 2</button>

<div id="msg">
  <h2>Do you like pie?</h2>
  <button id="btnYes" type="button">Yes</button>
  <button id="btnNo" type="button">No</button>
</div>

【讨论】：