JavaScript按钮值仅限于第一个按钮。如何克服？

我正在努力让我的JS根据按钮选择显示相关输出

我只得到返回的第一个值，因此选择按钮A将返回您所选的：A与预期一样，但选择按钮B或C不会产生任何效果

下面是我的html的一个示例：

让userSelection=document.querySelector'.userOutput'； let selected=document.querySelector'button'； 选中。添加EventListener“单击”，用户拾取； 用户选择的函数{ 让choice=selected.value； 如果选择=='a'{ userSelection.textContent='您选择了：A'； }如果选项=='b'{ userSelection.textContent='您选择了：B'； }如果选项=='c'{ userSelection.textContent='youselected:C'； }否则{ userSelection.textContent=错误 } } A. B C

您正在使用.querySelector，它查找与您的选择器匹配的第一个元素，在您的示例中是A按钮，这是您设置单击事件处理程序的按钮，因此这是唯一有效的按钮。相反，使用并仅返回单击的事件目标的值

让userSelection=document.querySelector'.userOutput'； //在文档上设置单击事件，以便任何单击都会触发回调 document.addEventListener'click'，userpick； 函数userPickedevt{ //检查所单击的实际对象是否为按钮之一 ifevt.target.classList.containsbtn{ //返回单击按钮的值 userSelection.textContent=evt.target.value； } } A. B C

来自

Document方法querySelector返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回null

虽然您确实应该在许多地方实现事件委派，但要获得您可能需要的元素集合，您可以使用这些元素修改您的选择，以获得所有按钮，并将事件处理程序添加到所有按钮中：

Array.prototype.slice.call(document.querySelectorAll('.btn'))
     .forEach((selected) => selected.addEventListener('click', userPicked) )

您还应该在事件处理程序中使用此选项，而不是尝试使用全局选定选项，因为在单击事件期间未更新该值

但在这里要小心，在向每个对象添加事件处理程序和向整个页面添加事件处理程序之间存在权衡。向所有对象添加处理程序无法很好地扩展。添加全局处理程序意味着您可能需要知道可能需要与同一事件交互的任何其他内容@Msterjojo的回答是事件委托的一个很好的例子，它将处理程序限制为仅包含元素

演示：

[…document.querySelectorAll'.btn'] .forEachselected=>selected.addEventListener'click'，userPicked； 让outputForButton=值=>{ 开关量{ 案例“a”：返回“您选择的：a”； 案例“b”：返回“您选择的：b”； 案例“c”：返回“您选择的：c”； 默认值：返回“Error”； } } 用户选择的函数{ document.querySelector'.userOutput'.textContent= OutputForButton.value； } A. B C

您只将单击事件附加到第一个按钮，为什么？自querySelector方法开始，返回您传递给它的选择器参数的第一个匹配项（在您的情况下，选择器是按钮）

因此，您可以使用querySelectorAll方法根据选择器获取所有按钮，然后必须循环遍历返回的类似数组的对象NodeList，其中包含与选择器匹配的每个元素的元素对象

下面是更新后的代码：

让userSelection=document.querySelector'.userOutput'， selected=document.querySelectorAll'button.btn'；//更具体地说。 //在按钮之间循环。 [].forEach.callselected，el=>{ //添加侦听器 el.addEventListener'click'，=>userSelection.textContent=el.value； }; A. B C

---

这是一个经典的事件委派系统：

const All_Buttons=document.querySelector'.allbuttons' ，user\u Output=document.querySelector'.userOutput' 所有按钮。onclick=e=> { 如果e.target.className！='btn'返回//忽略区域上的其他单击 user_Output.textContent=`您选择：${e.target.value.toUpperCase}` } A. B C

Scotts的回答同样有效，这是另一种处理方法

querySelector只针对其类型的第一个元素。如果使用querySelectorAll，则会得到一个变量，该变量保存元素所有实例的对象。这允许您对其进行迭代。为了更精确，我还建议对输出元素使用id=someId

jQuery解决方案

let userSelection = $('.userOutput')
let selected = $('.btn')

selected.click(function() {
  userSelection.html('You have selected: ' + $(this).text())
})

---

您的代码只将单击处理程序附加到第一个按钮元素。你以为会发生什么？这里有两件事。。。1这在任何版本的IE 2中都不起作用，将处理程序连接到每个按钮可以是w

---

当你可以仅仅使用事件委派时，你会觉得很愉快。那么，如何权衡呢？执行一个先检查是否应该继续的函数，这样它就不会不必要地执行任务，这比在多个DOM对象上占用内存要好。现在，您有了一个循环，带有一个包含条件的回调。这是一个完美的用例，可以解释为什么存在事件委派。我的答案确实显示了正确的输出-单击按钮的值。而且，委托唯一会干扰的时候是模式没有正确实现的时候。事实上，这个答案扫描DOM以收集所有匹配的元素，然后在每个元素上循环，然后向每个元素添加事件绑定，并在该事件绑定中实现条件测试。这行得通吗？可以接受吗？当然，我只是说，设置单个事件绑定并取消确定单击哪个按钮的持续测试，不仅更简单，而且更有效。这简直是吹毛求疵。获取单击元素的值是问题的主要目标。将静态文本放在它旁边是很简单的，而不是问题所问的。我认为将我的答案标记为答案的操作说明了这一点。最好让代理过滤事件，然后执行特定于过滤事件的回调element@Tibrogargan为什么？首先解释为什么这比简单地对元素进行过滤要好，因为回调实际上就是关心这个问题的。过滤事件？事件将始终为单击。你该怎么过滤呢？委派是关于在事件目标上进行过滤——这是导致事件发生的原因。这个答案建议，对于希望行为附加到事件的每个实例，都需要添加一个事件侦听器，该侦听器过滤到正确的元素集，然后在处理程序中实现所需的功能。这导致了与你认为我的答案完全相同的低效。@Tibrogargan，不，不是。我认为您不了解事件委派以及设置事件处理程序如何影响内存。我的答案设置了一个事件回调，无论您有多少个按钮。它在没有DOM扫描或任何循环的情况下完成此操作。您的需要对DOM进行扫描，并对所有找到的元素进行循环，以便为每个找到的元素创建回调。就效率而言，你的方法和我的方法是不等价的。为什么[]。forEach.callselected，el而不是selected。forEach。。。。？

let userSelection = $('.userOutput')
let selected = $('.btn')

selected.click(function() {
  userSelection.html('You have selected: ' + $(this).text())
})