# Swap Mask with Mask Effects

**URL:** <https://forum.8thwall.com/t/swap-mask-with-mask-effects/4317>\
**Category:** Technical Support\
**Created:** [December 26, 2024, 8:08pm UTC](https://forum.8thwall.com/t/swap-mask-with-mask-effects/4317 "2024-12-26T20:08:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![FLEX-N-ROLL\_PRO\_Legc](https://avatars.discourse-cdn.com/v4/letter/f/dc4da7/32.png) [@FLEX-N-ROLL\_PRO\_Legc](https://forum.8thwall.com/u/FLEX-N-ROLL_PRO_Legc)\
**Post date:** [December 26, 2024, 8:08pm UTC](https://forum.8thwall.com/t/swap-mask-with-mask-effects/4317/1 "2024-12-26T20:08:31Z")

</div>

Hello, I want to make it so that when I press a button the header changes, but nothing works, help  
here is body.html:`

```
<xrextras-face-mesh xrextras-hider-material></xrextras-face-mesh>

<!-- Шапка (по умолчанию пиратская) -->
<a-entity
  id="hat"
  gltf-model="#pirate-hat"
  position="0 0.55 0.2"
  scale="1.2 1.35 1.35"
  rotation="-10 0 0"></a-entity>

<a-entity
  id="hat"
  gltf-model="#diadem-hat"
  position="0 0.55 0.2"
  scale="1.2 1.35 1.35"
  rotation="-10 0 0"></a-entity>

<div
  style="
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
  ">
  <button id="nextbutton">Change Hat</button>
</div>

```

`this is js:`export function hatSwitcherComponent() {  
const hats = [‘pirate-hat’, ‘diadem-hat’] // Список идентификаторов шапок  
let currentHatIndex = 0 // Индекс текущей шапки

let hatEntity = document.getElementById(‘hat’) // Получаем элемент шапки

const nextButton = document.getElementById(‘nextbutton’) // Получаем кнопку

nextButton.addEventListener(‘click’, () =\> {  
currentHatIndex = (currentHatIndex + 1) % hats.length // Изменяем индекс шапки

```
const hatId = hats[currentHatIndex] // Получаем новый идентификатор шапки
const newHat = document.createElement('a-entity') // Создаем новый элемент шапки

newHat.setAttribute('gltf-model', `#${hatId}`) // Устанавливаем новую шапку
newHat.setAttribute('position', '0 0.55 0.2')
newHat.setAttribute('scale', '1.2 1.35 1.35')
newHat.setAttribute('rotation', '-10 0 0')

hatEntity.parentNode.replaceChild(newHat, hatEntity) // Заменяем текущую шапку на новую
hatEntity = newHat // Обновляем ссылку на элемент шапки

```

})  
}  
`

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [January 2, 2025, 4:45pm UTC](https://forum.8thwall.com/t/swap-mask-with-mask-effects/4317/2 "2025-01-02T16:45:25Z")

</div>

I’d be happy to take a look. Could you share your project with the `support` workspace?

> **[Project Sharing | 8th Wall](https://www.8thwall.com/docs/guides/projects/project-sharing/#share-project-with-another-workspace)**
>
> Project sharing allows members of another trusted workspace to access a specific project in your