如何通过现有HTML按钮触发事件修改指定元素的opacity透明度

• document.getElementsByClassName()返回的是HTMLCollection类数组对象，不是单个DOM元素，直接对其绑定onclick事件、修改style属性都不会生效，需要指定下标获取对应元素，比如document.getElementsByClassName("pippo1")[0]才能拿到第一个class为pippo1的按钮。
• 你提供的完整测试代码中没有id为text1/text2/text3/text4的对应DOM元素，JS操作不存在的元素不会产生可见效果。
• 你已经在按钮标签上通过onclick="myFunction(this)"声明了点击事件绑定，不需要再额外用JS绑定onclick，两种绑定方式选一种即可，避免逻辑冲突。
• 代码中读取了button.dataset.opacity的参数但没有实际使用，当前逻辑是写死透明度值，没有复用该参数。

<html>
<head>
<style>
/* 给测试文本加默认样式，默认透明度为0 */
.demo-text {
  opacity: 0;
  transition: opacity 0.3s; /* 可选：加过渡动画更流畅 */
}
</style>
<script>
function myFunction(button) {
  // 如果你需要用data-opacity的参数可以这么拿
  // const targetOpacity = button.dataset.opacity;
  const el1 = document.getElementById("text1");
  const el2 = document.getElementById("text2");
  const el3 = document.getElementById("text3");
  const el4 = document.getElementById("text4");
  el1.style.opacity = "1";
  el2.style.opacity = "0";
  el3.style.opacity = "0";
  el4.style.opacity = "0";
}
</script>
</head>
<body>
<button data-opacity="0" class="pippo1" onclick="myFunction(this)">PROJECT</button>
<!-- 新增你要操作的文本元素 -->
<p id="text1" class="demo-text">文本1内容</p>
<p id="text2" class="demo-text">文本2内容</p>
<p id="text3" class="demo-text">文本3内容</p>
<p id="text4" class="demo-text">文本4内容</p>
</body>
</html>

如果你不想在标签上写onclick属性，想实现HTML和JS逻辑分离，可以用下面的代码替换上面的script部分，按钮标签也可以去掉onclick属性：

// 等DOM全部加载完成后再绑定事件，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 取第一个class为pippo1的按钮绑定点击事件
  document.getElementsByClassName("pippo1")[0].addEventListener('click', function() {
    const el1 = document.getElementById("text1");
    const el2 = document.getElementById("text2");
    const el3 = document.getElementById("text3");
    const el4 = document.getElementById("text4");
    el1.style.opacity = "1";
    el2.style.opacity = "0";
    el3.style.opacity = "0";
    el4.style.opacity = "0";
  });
});

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