Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

Igal

Here's what I'm trying to achiev: I have a center circle div, that contains 5 other divs. When I rotate a device on gamma axis, I want the circle div to rotate accordingly to the gamma degree, but the 5 inner divs to rotate in counter direction (sort of create an illusion that the inner divs are not actually spinning, sort of a ferris wheel effect). I wrote this code:

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 problem is inside the for loop - when the code gets to this line var st = window.getComputedStyle(el, null); I'm getting these error messages: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. I tried to change the el var to icons[i].id, but it didn't help.

Any ideas why it;s happening and how to fix it?

Zee

As @Juhana mentioned in comments, your last loop will fail because there is no element var el = icons[i]; // where i=icons.length

hence change your loop to

for (var i = 0; i < icons.length; i++){//change <= to <

and it should work.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

Failed to execute 'postMessage' on 'Window' GoogleTagManager

From Java

Uncaught DOMException: Failed to execute 'postMessage' on 'Window'

From Dev

Javascript - window.getComputedStyle returns "auto" as element top and left properties

From Dev

Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function.

From Dev

Failed to execute 'atob' on 'Window'

From Dev

Window.getComputedStyle does not implement interface Element error in Firefox

From Dev

Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'my_page' in a call to 'postMessage'

From Dev

TypeError: Argument 1 of Window.getDefaultComputedStyle does not implement interface Element

From Dev

Polymer and Disqus on Firefox: Argument 1 of Window.getComputedStyle does not implement interface Element

From Dev

Error "Uncaught TypeError: Failed to execute 'animate' on 'Element': Valid arities are: [1], but 4 arguments provided." on dynamic input field

From Dev

Getting an error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

From Dev

Cannot append DOM element to DIV node: Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node'

From Dev

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'

From Dev

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

From Dev

Leaflet.markercluster onclick error - Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

From Dev

getComputedStyle failed to execute

From Dev

Uncaught TypeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The provided double value is non-finite

From Dev

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'

From Dev

Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

From Dev

typeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node Polymer

From Dev

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent

From Dev

TypeError: Argument 1 of Window.getDefaultComputedStyle does not implement interface Element

From Dev

Failed to execute 'scroll' on 'Window': 2 arguments required, but only 1 present

From Dev

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' error on append tr to a table

From Dev

polymer.html: Uncaught TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'

From Dev

Angularjs : Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

From Dev

Javascript error: Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

From Dev

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' - Angular / Ionic kendo-chart

From Dev

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. in Chrome

Related Related

  1. 1

    Failed to execute 'postMessage' on 'Window' GoogleTagManager

  2. 2

    Uncaught DOMException: Failed to execute 'postMessage' on 'Window'

  3. 3

    Javascript - window.getComputedStyle returns "auto" as element top and left properties

  4. 4

    Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function.

  5. 5

    Failed to execute 'atob' on 'Window'

  6. 6

    Window.getComputedStyle does not implement interface Element error in Firefox

  7. 7

    Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'my_page' in a call to 'postMessage'

  8. 8

    TypeError: Argument 1 of Window.getDefaultComputedStyle does not implement interface Element

  9. 9

    Polymer and Disqus on Firefox: Argument 1 of Window.getComputedStyle does not implement interface Element

  10. 10

    Error "Uncaught TypeError: Failed to execute 'animate' on 'Element': Valid arities are: [1], but 4 arguments provided." on dynamic input field

  11. 11

    Getting an error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

  12. 12

    Cannot append DOM element to DIV node: Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node'

  13. 13

    Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'

  14. 14

    Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

  15. 15

    Leaflet.markercluster onclick error - Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

  16. 16

    getComputedStyle failed to execute

  17. 17

    Uncaught TypeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The provided double value is non-finite

  18. 18

    Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'

  19. 19

    Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

  20. 20

    typeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node Polymer

  21. 21

    Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent

  22. 22

    TypeError: Argument 1 of Window.getDefaultComputedStyle does not implement interface Element

  23. 23

    Failed to execute 'scroll' on 'Window': 2 arguments required, but only 1 present

  24. 24

    Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' error on append tr to a table

  25. 25

    polymer.html: Uncaught TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'

  26. 26

    Angularjs : Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

  27. 27

    Javascript error: Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

  28. 28

    Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' - Angular / Ionic kendo-chart

  29. 29

    Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. in Chrome

HotTag

Archive