如何知道在Javascript中何时单击特定按钮？

我正在制作一个显示模态的函数，模态有两个按钮。我想让这个函数等待两个按钮中的一个被点击，然后返回一个对应于被点击按钮的值

下面是我提出的示例代码：

function myFunc()
{
  var val=0;
  buttonA = document.getElementById('buttonA');
  buttonB = document.getElementById('buttonB');
  buttonA.onclick = function(){
    //do something
    val = 1;
  }
  buttonB.onclick = function(){
    //do something
    val = 2;
  }
  while(val == 0);
  return val;
}

此代码中的问题是，由于无限循环，页面变得无响应，因此一旦初始化，就不可能更改

val

的值

更准确地说，我希望主线程（myFunc正在其上实现）休眠，直到单击其他两个线程（buttonA和buttonB）中的一个

---

还有其他的工作吗？请仅用Javascript回答（无jQuery）。谢谢。

试试这样的东西：

function myFunc()
{
  buttonA = document.getElementById('buttonA');
  buttonB = document.getElementById('buttonB');
  buttonA.onclick = function(){
    //do something
    differentFunc(1)
  }
  buttonB.onclick = function(){
    //do something
    differentFunc(2)
  }
}

这是一种使功能更加通用的不同方式（根据您的评论进行编辑）：

就这样说吧

myFunc(function(result) {
    // do stuff with result
    }

---

Javascript自然是单线程的。任何这样无限期等待的代码都会导致挂起并禁止输入。有很多方法可以编写异步函数，也就是像我刚才所做的那样使用承诺，但通常更容易使代码同步工作。

请尝试以下方法：

function myFunc()
{
  buttonA = document.getElementById('buttonA');
  buttonB = document.getElementById('buttonB');
  buttonA.onclick = function(){
    //do something
    differentFunc(1)
  }
  buttonB.onclick = function(){
    //do something
    differentFunc(2)
  }
}

这是一种使功能更加通用的不同方式（根据您的评论进行编辑）：

就这样说吧

myFunc(function(result) {
    // do stuff with result
    }

---

Javascript自然是单线程的。任何这样无限期等待的代码都会导致挂起并禁止输入。有很多方法可以编写异步函数，也就是像我刚才所做的那样使用承诺，但通常更容易使代码同步工作。

如果我理解OP的目的是创建一个包含两个选项的模式，例如？但是由于某种原因，

confirm（）

不合适吗？每个按钮上都有一个值，它等待用户交互？除非我遗漏了一些相当重要的东西，否则我已经创建了一个动态生成的模式（没有手动标记），它有两个按钮。我找不到目的和结果，所以我把它留给了一个事件监听器和一个带有简单三元条件的函数，OP可以自行决定用适当的语句或表达式替换警报

一小条

.莫代尔{
位置：固定；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
背景：透明；
}
.ui{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
显示：表格单元格；
边框：3倍脊灰；
边界半径：6px；
}
钮扣{
字体大小：24px；
}
var frag=document.createDocumentFragment（）；
var modal=document.createElement（'div'）；
var ui=document.createElement（'div'）；
var on=document.createElement（'button'）；
var off=document.createElement（'button'）；
modal.className='modal'；
ui.className='ui'；
on.id='on'；
on.textContent='on'；
off.id='off'；
off.textContent='off'；
框架附件（模态）；
模态子对象（ui）；
ui.appendChild（on）；
ui.appendChild（关闭）；
ui.addEventListener（'click'，status，false）；
功能状态（e）{
var tgt=e.target.id；
tgt=='on'？警报（'on！'）：警报（'OFF！'）；
}
文件.正文.附件（frag）；

如果我理解OP的目的是创建一个包含两个选项的模态，比如？但是由于某种原因，

confirm（）

不合适吗？每个按钮上都有一个值，它等待用户交互？除非我遗漏了一些相当重要的东西，否则我已经创建了一个动态生成的模式（没有手动标记），它有两个按钮。我找不到目的和结果，所以我把它留给了一个事件监听器和一个带有简单三元条件的函数，OP可以自行决定用适当的语句或表达式替换警报

一小条

.莫代尔{
位置：固定；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
背景：透明；
}
.ui{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
显示：表格单元格；
边框：3倍脊灰；
边界半径：6px；
}
钮扣{
字体大小：24px；
}
var frag=document.createDocumentFragment（）；
var modal=document.createElement（'div'）；
var ui=document.createElement（'div'）；
var on=document.createElement（'button'）；
var off=document.createElement（'button'）；
modal.className='modal'；
ui.className='ui'；
on.id='on'；
on.textContent='on'；
off.id='off'；
off.textContent='off'；
框架附件（模态）；
模态子对象（ui）；
ui.appendChild（on）；
ui.appendChild（关闭）；
ui.addEventListener（'click'，status，false）；
功能状态（e）{
var tgt=e.target.id；
tgt=='on'？警报（'on！'）：警报（'OFF！'）；
}
文件.正文.附件（frag）；

您有什么特别的理由不从onclick处理程序返回1或2吗？您的无限循环设计很糟糕。你的线会粘住的。你需要从函数链接到按钮上单击调用你想要执行的函数。@AxelH我知道无限循环是一个糟糕的设计，它不起作用，这就是为什么我在这里发布这个问题：P我写这个是为了解释我想要实现什么。我不希望函数结束，除非单击其中一个按钮。但是你不能等待。。。如果你等待，你会阻止一切。。。这根线需要松开。您可以通过检查标志值将标志

modal

设置为

true

，以阻止某些操作，但这可能是…让我们备份，为什么要等待这两个输入？用户还有什么其他选择？你有什么特别的理由不从onclick处理程序返回1或2吗？你的无限循环是一个糟糕的设计。你的线会粘住的。您需要调用要执行的函数