Estoy intentando cambiar la propiedad "visible" cuando mi var n es igual a 1. Algo en mi código no está bien, pero no sé qué estoy haciendo mal

<a-assets>
        <img id="txt-image" src="/img/txt.png">
        <img id="btn-image" src="/img/btn.png">
</a-assets>
<a-image src="#btn-image" position="0.35666 1.90018 -1.26009" geometry="" scale="0.361 0.09143 0.14667" rotation="10.87 0 0" class="clickable" cursor-listener></a-image>

<a-image src="#txt-image" position="0.1901 1.80662 -1.24519" geometry="" scale="0.85378 0.04647 0.34688" rotation="10.87 0 0" material="" visible="false" cursor-listener></a-image>
var n = 0;

AFRAME.registerComponent('cursor-listener', {
init: function () {
  let text = document.querySelector("#txt-image");
  this.el.addEventListener('click', function (evt) {
    n += 1;
    console.log(n);

    if(n == 1){ 
        text.setAttribute("visible", true);
    }
    if(n == 2){
        window.open('portfolio.html', '_blank');
    }

  });
}
});

No tengo errores de consola hasta ahora, así que realmente no sé qué está pasando.

1
Juan Camilo Sanchez Alfonso 27 sep. 2019 a las 07:52

1 respuesta

La mejor respuesta

Está intentando cambiar la visibilidad del elemento del activo, no la <a-image>.

Puede crear una id exclusiva para la entidad <a-image> y proporcionarla al querySelector.


Para responder al tema, puede cambiar la visibilidad con setAttribute:

var isVisible = true // or false
element.setAttribute("visible", isVisible);

Violín aquí.

2
Piotr Adam Milewski 27 sep. 2019 a las 08:17