JavaScript中event.target判断元音首字母时an/a输出异常求助

问题根源 #

你编写的targetClick函数中，for循环逻辑存在错误。以点击EM标签为例：

• EM的nodeName为大写的EM，首字母E确实在元音数组中，但循环会遍历数组里的每一个元音元素
• 当遍历到不匹配的元音（比如A、I、O等）时，代码会反复将输出文本重置为a EM element，最终覆盖了之前正确的an EM element结果

修正方案 #

方案一：用includes简化判断（推荐）

直接提取标签名首字母，判断是否在元音数组中，无需循环：

const grandParent = document.querySelector('main#grand-parent')
const parent = document.querySelector('section#parent')
const children = document.querySelector('div#children')

const currentTargetOutput = document.querySelector('strong#currentTargetOutput')
const targetOutput = document.querySelector('strong#targetOutput')

function currentTargetClick(e) {
  currentTargetOutput.textContent = `You clicked on a ${e.currentTarget.tagName} element`;
}

// 优化：nodeName返回大写，只需保留大写元音（补充U，避免遗漏如UL这类标签）
const vowels = ['A', 'E', 'I', 'O', 'U']

function targetClick(e) {
  const tagName = e.target.nodeName;
  const firstLetter = tagName[0];
  // 判断首字母是否为元音，选择对应的冠词
  const article = vowels.includes(firstLetter) ? 'an' : 'a';
  targetOutput.textContent = `You clicked on ${article} ${tagName} element`;
}

grandParent.addEventListener('click', currentTargetClick)
grandParent.addEventListener('click', targetClick)

方案二：保留循环但添加终止逻辑

如果想保留循环写法，找到匹配的元音后立即终止循环，避免后续覆盖结果：

function targetClick(e) {
  let article = 'a';
  const tagName = e.target.nodeName;
  for (const vowel of vowels) {
    if (tagName.startsWith(vowel)) {
      article = 'an';
      break; // 找到匹配项后停止循环
    }
  }
  targetOutput.textContent = `You clicked on ${article} ${tagName} element`;
}

额外优化提示 #

nodeName属性返回的标签名始终是大写形式，所以元音数组只需保留大写元音即可，无需同时存储大小写，减少冗余判断。

内容的提问来源于stack exchange，提问作者Matrion