Javascript 获取单击的元素'；s ID并将其包含在纯JS函数中？

我需要根据单击的每个不同图标显示不同的输出，而无需定义单独的功能

HTML:

我尝试了上面的方法，但显然不起作用，我需要a）存储图标的id，b）将id与字符串组合。不确定这是否可行。

将参数传递给函数 您需要向正在调用的函数传递一些数据（例如，对对象的引用、对象名称或其他任何您需要的数据）

例如，查看来自的示例代码

单击我以更改文本颜色

函数myFunction（elmnt、clr）{ elmnt.style.color=clr； }

icon2
首先。。你有4个打字错误。前3项是在
onclick=“expand（）

（在divs中添加了一些占位符文本，以查看这是否有效）

最后，作为第一个参数访问函数中的当前元素

function expand(el) {
  document.getElementById("block" + el.id).style.display = "block";
}

我可能会通过删除内联JS并使用类和数据属性来处理它。这里我有所有元素的类和数据属性。我将单击事件侦听器附加到调用
handleClick
函数的“按钮”上。此函数检查按钮的数据id属性，并获取相应的幻灯片，将“show”类添加到其类列表中


const buttons=document.querySelectorAll（'.button'）；
按钮。forEach（按钮=>{
addEventListener（'click'，handleClick，false）；
});
函数handleClick（e）{
const id=e.target.dataset.id；
const slide=document.querySelector（`.slide[data id=“${id}”]`）；
slide.classList.add（'show'）；
}
。幻灯片{
显示：无；
}
.表演{
显示：块；
}
icon1
icon2
icon3
区块1
区块I2
blocki3
您的代码应该是这样的

<p onclick="expand(this) id="i1">icon1</p>
<p onclick="expand(this) id="i2">icon2</p>
<p onclick="expand(this) id="i3">icon3</p>
<div id="blocki1"></div>
<div id="blocki2"></div>
<div id="blocki3"></div>

<script>
function expand(elm) {
       document.getElementById("block" + elm.id).style.display = "block";
    }
</script>

icon2
如果您是初学者，我建议您避免在HTML中添加处理程序的做法，以免它成为您的编码态度

相反，在js中为它们添加EventListener。关注点分离是一个非常重要的理论

在事件处理程序中处理
这个
是相对容易的

你可以阅读更多关于它的内容


var ps=Array.from（document.querySelectorAll（“p”）；
对于（变量i=0；i

div{
显示：无；
}
icon1

icon2

icon3

这是1
这是2
这是3
是不是
document.getElementById（“block”+This.getAttribute（'id'）
？这与@ajith的解决方案有点相同：）也感谢您找出了打字错误。是的，我是一个完全的初学者。抱歉，我不知道循环的目的是什么？
document.querySelectorAll（“p”）
提供了所有匹配元素的节点列表。因此，您必须向节点列表中的所有节点添加一个侦听器/这就是为什么存在循环
<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<script>
function myFunction(elmnt,clr) {
    elmnt.style.color = clr;
}
</script>

<p onclick="expand(this.id) id="i1">icon1</p>
<p onclick="expand(this.id) id="i2">icon2</p>
<p onclick="expand(this.id) id="i3">icon3</p>
<div id="blocki1"></div>
<div id="blocki2"></div>
<div id="blocki3"></div>
<script>
function expand(e) {
document.getElementById("block" + e).style.display = "block";
}}
</script>

<p onclick="expand() id="i1">icon1</p>
<!-- There needs to be " after expand() -->

<p onclick="expand(this)" id="i1">icon1</p>
<p onclick="expand(this)" id="i2">icon2</p>
<p onclick="expand(this)" id="i3">icon3</p>
<div id="blocki1">blocki1</div>
<div id="blocki2">blocki2</div>
<div id="blocki3">blocki3</div>

function expand(el) {
  document.getElementById("block" + el.id).style.display = "block";
}

<p onclick="expand(this) id="i1">icon1</p>
<p onclick="expand(this) id="i2">icon2</p>
<p onclick="expand(this) id="i3">icon3</p>
<div id="blocki1"></div>
<div id="blocki2"></div>
<div id="blocki3"></div>

<script>
function expand(elm) {
       document.getElementById("block" + elm.id).style.display = "block";
    }
</script>