Javascript 点击并显示？

我正在处理这个问题：

测试1

测试2

要显示的文本
要显示的其他文本
函数myevent（事件）{
变量x，i，clk，res；
x=document.getElementsByTagName（“DIV”）；
对于（i=0；i

您的代码中有一些拼写错误

首先，您用

其次，

getElementsBytagname

应该是，而

getelementbyid

应该是：

函数myevent（事件）{
变量x，i，clk，res；
x=document.getElementsByTagName（“DIV”）；
对于（i=0；i

测试1
测试2
要显示的文本
要显示的其他文本

事件处理程序 有三种方法可以处理事件（在本例中是

上的单击事件）：

• 事件属性（不推荐）

• 事件侦听器（推荐）

有关详细信息，请参阅和

---

活动代表团 下面的演示使用了一种称为事件委派的编程范例。与（O原始Post）中提供的代码相比，其优点是：

• 只需将一个标记注册为事件侦听器（所有目标标记的公共祖先标记-例如，
  是所有
  的祖先标记）

• 无需循环遍历每个目标标记并将每个标记注册到事件（例如，
  不必处于

  for

  循环中）

• 可以有无限数量的目标标签，并且知道不需要多少。（例如，理论上可以有一个

  到数千个
  ）
  
  可以随时动态添加目标标记——在页面加载期间或之后。如果采用其他方式，任何动态添加的标记都无法在不重新加载页面并以某种方式保留它们的情况下工作
  
  

有关详细信息，请参阅。

---

工具书类 在以下演示中，使用了这些方法和属性：

DOM

事件

---

演示 详细信息将在演示中进行注释

/*事件委派*/
//将祖先标记注册到事件
/*
将单击事件注册到所有的公共祖先标记
要单击的标签。
因此，在这种情况下，可点击的标签都是

祖先标记可以是：
窗口
文件
通常最接近的标签是最好的选择
*/
//----故障------
/* 
document.querySelector（'ol'）
--发现
.addEventListener（'click'）。。。
--将单击事件注册到
…，事件处理程序）；
--单击时运行函数eventHandler（）
*/
document.querySelector（'ol'）。addEventListener（'click'，eventHandler）；
//事件对象
/* 
传递事件对象，该对象将具有允许我们执行以下操作的属性和方法：
1.查找正在侦听click事件的标记
-event.currentTarget
-在这个演示中，它是
2.查找用户实际单击的标记
-事件目标
-在本演示中，只有
会对被单击做出反应
3.阻止单击事件在事件链上“冒泡”
-event.stopPropagation（）；
-此方法在eventHandler（）的末尾调用，因此
单击事件不会触发任何其他事件
*/
函数eventHandler（事件）{
//参考所有相关标签
//参见事件对象#1
const listener=event.currentTarget；
//参见事件对象#2
const clicked=event.target；
//发现
const display=document.querySelector（'output'）；
//----故障------
/*
如果不是用户单击的标记。。。
…如果单击的标记是
。。。
…获取
中的文本。。。
…然后把它放在
（每次单击都会覆盖它，因此不需要多个标记）
*/
如果（侦听器！==单击）{
如果（单击）。标记名==='LI'）{
让data=clicked.textContent；
display.textContent=数据；
}
}
/*  
无论是否单击了任何
，停止单击事件
参见事件对象#3
*/
event.stopPropagation（）；
}

main{
字体：700 1rem/1.5 Tahoma
}
李：悬停{
光标：指针
}

A
B
C
D
E
F
项目：

您是否已检查单击时是否发出事件，您可以通过在脚本或函数中应用

控制台日志

或

调试器

来检查是否发出事件谢谢您提供的信息。不是打字错误。我只是忘记了在切换元素时更改关闭标记。“foreach”和queryselectoral是个好主意，但这是我遇到的问题的下一部分。本部分：clk=e.target.title；res=document.getElementById（clk）；res.style.display=“block”；是什么不起作用。请advise@TheCrazyTech，但我的解决方案中的代码片段似乎可以相应地工作！

<ol onclick="eventHandler(); return false">...</ol>

document.querySelector('ol').onclick = eventHandler;

document.querySelector('ol').addEventListener('click', eventHandler);