Javascript 在类打开的情况下更新div和输入（keydown/keydup） 问题

工作演示如下

我正在尝试实现一个

广播机

和

接收器

函数（）
broadcaster
是当前正在键入的元素，
broadcast
将其内容发送给它的
接收者


在不断的迭代中…我无法通过
函数使其正常工作


我能让它工作的唯一方法是硬编码。

唯一的问题是…如果我有14个接收器…我将不得不硬编码所有14个




我试过的

功能广播（a）{
让receievers=[…document.getElementsByClassName（a）]，
activeElement=document.activeElement；
activeElement.onkeydown=函数（）{
对于（变量i=0；i
#div1，#div2{
位置：绝对位置；
宽度：计算（50%-8px）；}
#第二组{
右：0；}
.元素{
高度：60px；
文本对齐：居中；
字体大小：20px；
线高：60px；
字体系列：无衬线；
大纲：无；
背景#F0F2F7；
边缘底部：10px；
颜色：#3D4757；
}
.接受者{
}
输入{
宽度：100%；
高度：60px；
字体大小：20px；
边界：无；
大纲：无；
颜色：#3D4757；
背景#F0F2F7；
文本对齐：居中；
保证金：0；
填充：0；
}
输入：：-webkit输入占位符{
颜色：#3D4757；
不透明度：.25；}

接收器1
接收器1
接收器2
接收器2
你离这里很近，但有几件事不对：

问题：

如果要将事件侦听器添加到数组中，则会出现此问题
物体的形状
你把事情搞砸了。你真正需要的是
keyup
，而不是
keydown
，因为此事件无法返回键入的
价值观
解决方案：

您可以只使用一个来保存该迭代的索引。
否则，同一功能范围将共享
您可以选择相同迭代的值。创建单独的函数
for each将保存函数中的状态
َ使用
键控
事件
示例：


功能广播（类名）{
var receivers=document.querySelectorAll（'.'+className）；
对于（变量i=0，len=receivers.length；i

#第1部分，
#第二组{
位置：绝对位置；
宽度：计算（50%-8px）
}
#第二组{
右：0
}
.元素{
高度：60px；
文本对齐：居中；
字体大小：20px；
线高：60px；
字体系列：无衬线；
大纲：无；
背景#F0F2F7；
边缘底部：10px；
颜色：#3D4757
}
输入{
宽度：100%；
高度：60px；
字体大小：20px；
边界：无；
大纲：无；
颜色：#3D4757；
背景#F0F2F7；
文本对齐：居中；
保证金：0；
填充：0
}
输入：：-webkit输入占位符{
颜色：#3D4757；
不透明度：.25
}

接收器1
接收器1
接收器2
接收器2