My goal is to create a rotating effect with a center circle containing 5 inner divs. When the device is rotated on the gamma axis, I want the circle div to rotate in accordance with the gamma degree, while the inner divs rotate in the opposite direction to give the illusion of a Ferris wheel effect. Below is the code I have written for this:
document.addEventListener("DOMContentLoaded",onload);
function onload(){
if (window.DeviceOrientationEvent) {
console.log("DeviceOrientation is supported");
window.addEventListener('deviceorientation', function(eventData){
var tiltLR = eventData.gamma;
deviceOrientationHandler(tiltLR);
}, false);
} else {
console.log("DeviceOrientation NOT supported");
}
}
var lastTilt = 0;
function deviceOrientationHandler(tiltLR) {
var circle = document.getElementById('center-circle');
var str = window.getComputedStyle(circle, null);
var trans = str.getPropertyValue("-webkit-transform");
var tr_values = trans.split('(')[1],
tr_values = tr_values.split(')')[0],
tr_values = tr_values.split(',');
circle.style.webkitTransform = "translate("+tr_values[4]+"px, "+tr_values[5]+"px) rotate("+ tiltLR +"deg)"
var icons = document.getElementsByClassName('icon-circle');
tiltLR = Math.abs(tiltLR);
for (var i = 0; i <= icons.length; i++){
var el = icons[i];
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform");
var values = tr.split('(')[1],
values = values.split(')')[0],
values = values.split(',');
if (tiltLR > lastTilt) {
icons[i].style.webkitTransform = "translate("+values[4]+"px, "+values[5]+"px) rotate(-"+ tiltLR +"deg)";
} else {
icons[i].style.webkitTransform = "translate("+values[4]+"px, "+values[5]+"px) rotate("+ tiltLR +"deg)";
}
console.log("el"+i+": "+tr+" | vals: "+values);
}
lastTilt = tiltLR;
}
The issue arises within the for loop - specifically at this line
var st = window.getComputedStyle(el, null);Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'el variable to icons[i].id, but that did not resolve the problem.
Any insights into why this is occurring and how to rectify it would be greatly appreciated.