js setAttribute with Array

Question

I have a problem with setAttribute. I set an Array as the value of rotation, but it doesn't work. Alert of gradRoll is a number. But the type of gradRoll is undefined. Why? Can anybody help me? thanks in advance.

AFRAME.registerComponent('clockhand_roll',{
    schema:{
      type:'string', default: "secondClockhand"
    },

    init:function(){
      var data = this.data;
      var el=this.el;

      var oTime= new Date();
      var curTime;

      var clockhandPositonArray;

      if(data == "secondClockhand" ){
        curTime = oTime.getSeconds();
      }else if(data == "minuteClockhand"){
        curTime = oTime.getMinutes();
      }else if(data == "hourClockhand"){
        curTime = oTome.getHours;
      }else {
        alert("invalid input!");
      }

      //alert(curTime);  
      //clockhandPositonArray=getClockhandPosition(curTime, data);
      //alert(el.getAttribute("rotation"));

      //el.setAttribute("rotation", 'clockhandPositonArray');

      setClockhandPosition(el, curTime, data);

    }
  });

  function setClockhandPosition(el, curTime, typeOfClockhand){
    var gradForOneUnit;
    var gradRoll;
    var rotationArray;

    if(typeOfClockhand == "secondClockhand" || typeOfClockhand == "minuteClockhand"){
      gradForOneUnit=360/60;
    }else if(typeOfClockhand == "hourClockhand"){
      gradForOneUnit=360/12;
    }

    gardRoll=curTime*gradForOneUnit;

    //alert(gardRoll); //number: 354!!!!!!!!!!!!!!!!!!!! why??????
    //alert(typeof(gradRoll)); //undefined!!!!!!!!!!!!!  why??????

    rotationArray=[curTime*gradForOneUnit, 0, 0];

    //alert(typeof(rotationArray));//object
    //alert(typeof(el.getAttribute("rotation"))); //object

    //alert(rotationArray); //number: 162 , 0, 0

    el.setAttribute("rotation", rotationArray); //dosn't work.
  }

rotationArray={x: curTime * gradForOneUnit, y: 0, z: 0}; it works — L3 Zhang
– L3 Zhang, Commented Jul 6, 2017 at 14:03

Piotr Adam Milewski · Accepted Answer · 2017-07-07 00:39:02Z

1

Lot of people suggesting:
el.setAttribute("rotation", 'x'+'y' + 'z'); method, as far as i know, it's a bit more efficient to omit the parsing ( 'x y z' to {x,y,z} ) and use the object in the first place :
el.setAttribute("rotation", {x:gradRoll,y:0,z:0});

answered Jul 7, 2017 at 0:39

Piotr Adam Milewski

14.7k3 gold badges23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bluehipy · Accepted Answer · 2017-07-06 13:31:25Z

0

Use:

el.setAttribute("transform", "rotate3d,x,y,z,angle)");

or combine rotateX, rotateY, rotateZ.

answered Jul 6, 2017 at 13:31

bluehipy

2,2941 gold badge15 silver badges19 bronze badges

1 Comment

L3 Zhang Over a year ago

Thanks a lot. rotation should be a object.

Riccardo · Accepted Answer · 2017-07-06 19:32:08Z

0

gradRoll is undefined because the variable name is gardRoll, a typo that you repeated in the first alert but not in the second one.

It seems like you only wish to edit the X value of the rotation so try this:

el.setAttribute("rotation", gardRoll + ' 0 ' + '0');

Note that I used the variable with the typo in it.

It's a bit dirty I know but it worked for me when I had a similar issue with the position component.

answered Jul 6, 2017 at 19:32

Riccardo

1659 bronze badges

Collectives™ on Stack Overflow

js setAttribute with Array

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related