Javascript 使用JS切换类-仅更改实际位置

我的代码有问题。。。当我按下按钮时，我想显示一个特定的FA图标，当我再次按下按钮时，我想显示不同的FA图标。（附图）：

但是当我按下按钮时，所有的按钮都会改变。。。我认为这个问题是暂时的，但我不知道如何解决它

   <script>
          function MostrarObra(){
            var Icon = document.getElementsByTagName('i');
            
              for (i = 0; i < Icon.length; i++) {
                Icon[i].classList.toggle('fa-angle-double-down');
                Icon[i].classList.toggle('fa-angle-double-up');
              }
            };
</script>


  <div class="card-header p-0" id="headingTwo">
      <button onclick="MostrarObra()" class="button w-100 text-left" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
          <span class="h5 font-weight-bold"> <i class="fas fa-angle-double-down mr-2"></i> Obra PACE Sarmiento</span>
      </button>
  </div>

函数MostrarObra（）{
var Icon=document.getElementsByTagName（'i'）；
对于（i=0；i

调用

document.getElementsByTagName（'i'）

将获得文档中的所有元素i。这就是为什么所有的按钮都会改变

您可以将触发事件的按钮传递给函数，并开始从中查找i元素

功能MostrarObra（元素）{
const icon=element.querySelector（'i'）；
icon.classList.toggle（'fa-angle-double-down'）；
icon.classList.toggle（'fa-angle-double-up'）；
}
[...]
[...]

感谢asnwer，但现在控制台显示一个错误：“元素未定义”尝试使用文档而不是元素，但也不起作用：（您是否将按钮的

onclick

属性更改为

MostrarObra（此）

？我在下面的第二个按钮中完成了，但在第一个按钮中没有：D，它正在工作。非常感谢您，您救了我。