Search code examples
javascripthtmlaframewebvr

Aframe animation with javascript split id

i am developing an Aframe WebVR app, trying to write a function that will split a this.id into two parts and giving it to a variable then .setattribute

this is my code

AFRAME.registerComponent('remove-yellow', {
  init: function () {
    this.el.addEventListener('click', function (evt) {
    console.log(this.id);
    var boxid = this.id.split("-")[0];
    console.log(boxid);
    boxid.setAttribute("animation__scale", "property: scale; from: 1 1 0.01; to: 0.001 0.001 0.001; dur: 150");
    });
  }
});

with var boxid, console will give uncaught TypeError: boxid.setAttribute is not a function.This is the box that I am trying to animate:

<a-box id="box1" position="0 2 -1.5" rotation="0 0 0" depth="0" width="1" height="1" color="#39dbd8" scale="0.001 0.001 0">
        <a-entity id="info" width="1" position="0 0 0.6" text="value: Hello people what is going on AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa; color:#000;"></a-entity>
        <a-box id="box1-close" class="clickable" remove-yellow id="box2" position="0.4 0.4 0.6" rotation="0 0 0" depth="0" width="0.15" height="0.15" color="#f00" scale="1 1 0">
        </a-box>
</a-box>
<a-box id="box1-show" class="clickable" add-yellow id="box3" position="0 2 -2" rotation="0 0 0" depth="0" width="0.5" height="0.5" color="#008000" scale="1 1 0"></a-box>

when box1-show is clicked, its id will be split"-", box1 will then receive the animation attribute. If I write:

box1.setAttribute("animation__scale", "property: scale; from: 1 1 0.01; to: 0.001 0.001 0.001; dur: 150");

it will work fine.But with var boxid, console will give uncaught TypeError: boxid.setAttribute is not a function.

I have tried the codes below from other solutions I found:

$(boxid).attr('animation__scale', 'property: scale; from: 1 1 0.1; to: 0.001 0.001 0.001; dur: 150');

the error will disappear but it will not animate.

I am thinking it might be a syntax error, anyone have any ideas?

Solution

  • At first the id is box1-close, then its redeclared as box2. Its best to use the id only for identification purposes, not to smuggle data :)

    Normally You could use the global data attribute:

    <div data-id="box1"></div>

    But considering it's best to fully utilize the a-frame component system, You need to use the component's schema.

    Should the component manipulate any other element on the scene, just do

    <a-entity my-component="param: value">

    and access it in the component by the reference this.data.param.

    Moreover the id, split or not, is just a string, you can't set any attributes to it, hence the error. If you want to set an attribute to the element it represents, you can grab it using: document.querySelector("#" + value).setAttribute(), or more properly with document.getElementById(value).setAttribute().

    You can check it out in my fiddle.