Javascript 管理两个eventlistener的结果

我试图在下拉列表中返回所选值，并将其属性设置为atom.name，以便更改atom名称。默认情况下，有ch2分子，当点击Na时。Ch2应该由Na替换，但问题是事件侦听器的范围以及管理这两个事件侦听器的能力。管理下拉结果的人

var a = document.getElementById('atomDropdown');
a.addEventListener('change', function() {
  console.log(this.value);
}, false);

console.log在此提供正确的结果和 使用管理下拉菜单位置的eventlistener

document.body.addEventListener('mouseup', e => {
    let atom = atoms.find(a => distance(a.position, { x: e.pageX, y: e.pageY}) <= a.r)
    atomDropdown.classList.remove('hidden')
    if(atom){
       atomDropdown.style.left = atom.position.x + 'px'
       atomDropdown.style.top = (atom.position.y + atom.r) + 'px'
    }
    console.log(atom.name);
})

测试1
测试2
测试3

如果我正确理解了这个问题，您希望将下拉菜单的值设置为atom.name

如果是这样，您需要向选项添加一个属性“value”，然后您可以这样说：

document.getElementById("atomDropdown").value = atom.name

HTML将如下所示：

<select id="atomDropdown" class="hidden">
    <option value="Na">Test1</option>
    <option value="Ch2">Test2</option>
    <option value="O2">Test3</option>
</select>

测试1
测试2
测试3

看起来所需的行为是更改单击的atom的atom.name的值，将其替换为下拉菜单中的名称

例如，点击一个CH2原子->从下拉菜单中选择“Test1”->点击原子的this.name值将从“CH2”变为“Test1”

如果是这种情况，那么问题在于如何在atomDropdown的“change”处理程序中针对上一个“mouseup”事件中的同一个原子。在这种情况下，可以在定义中添加新变量：

const canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight,
atoms = [],
bonds = [],
atomDropdown = document.getElementById('atomDropdown')

var selectedAtom = null

将selectedAtom设置为“mouseup”处理程序中的atom实例：

---

编辑：要立即更新GUI/display中显示的原子名称，还必须在选择原子后调用render（）。名称在atomDropDown的“更改”事件中更改。

您好，ESOP这很奇怪，因为我可以更改除右原子之外的每个原子：看起来有两个重叠的原子（即，在同一位置的第一个原子的顶部绘制一个额外的第七个原子）。如果您将

中的条件“side<7”更改为“side<6”（var side=0；side<7；side++）

和

If（side==6）中的条件“If（side==6）”更改为新键（{atom1:newAtom，atom2:atoms[0]））

这就解决了问题。这是一种find（）只返回数组中第一个匹配元素的情况，当有两个元素匹配时。这发生在“mouseup”事件中，原子[0]成为选定的原子。由于render（）函数将首先绘制原子[0]，因此在绘制原子[6]时，原子[0]被覆盖。

document.body.addEventListener('mouseup', e => {
let atom = atoms.find(a => distance(a.position, { x: e.pageX, y: e.pageY}) <= a.r)
atomDropdown.classList.remove('hidden')
if(atom){
   selectedAtom = atom
   atomDropdown.style.left = atom.position.x + 'px'
   atomDropdown.style.top = (atom.position.y + atom.r) + 'px'
}
console.log(atom.name);

var a = document.getElementById('atomDropdown');
a.addEventListener('change', function() {
  if (selectedAtom) {
    selectedAtom.name = this.value;
    render(); //added so that the GUI updates when the name value changes
  }
  console.log(this.value);
}, false);