JS error only in Opera - Cannot convert x to object

Question

This error only occurs in the Opera browser. I've seen a few posts with a similar error, but i don't think the suggested solutions apply to my example. Most solutions say x is undefined. I don't think that applies, since i defer my script.

My html file:

<head>
    ...
    <script src="media.match.min.js"></script>
    <script defer src="bgimg.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
    <div id="container"></div>
</body>

media.match.min.js is a polyfill for window.matchMedia() for old browsers.

bgimg.js is my own script which updates the background image according to media queries.

I'll just post the entire first part of bgimg.js since it's in such an early phase (media queries omitted):

var container = document.getElementById("container");

// declare all media queries
var mqXS = window.matchMedia("...");
var mqS = window.matchMedia("...");
var mqM = window.matchMedia("...");
var mqL = window.matchMedia("...");
var mqXL = window.matchMedia("...");
var mqXXL = window.matchMedia("...");
var mqXXXL = window.matchMedia("...");

// create matching arrays to iterate
var queryLists = [mqXS, mqS, mqM, mqL, mqXL, mqXXL, mqXXXL];
var fileNames = ["_xs", "_s", "_m", "_l", "_xl", "_xxl", "_xxxl"];

// function to check media queries and load matching image
var checkQueries = function() {
    for (var i = 0; i < queryLists.length; i++) {
        if (queryLists[i].matches) {
            var fileName = "url(images/ls/01" + fileNames[i] + ".jpg)";

            container.style.backgroundImage = fileName;
            break;
        } else {
            console.log("no match");
        }
    }
};

// run once
checkQueries();

So this works in all modern browsers, but throws this error in Opera:

Unhandled Error: Cannot convert 'container' to object

on line 27:

container.style.backgroundImage = fileName;

So maybe Opera has a bug up its butt about how i created fileName? Or is something else wrong with my script? Again, no errors are thrown in any other browser.

nope, nothing to do with fileName, Error says that container is not an object. Perhaps opera converts it to a string. Different browsers behave differently, thats why it is recommended to use jQuery for DOM manipulations - it gives you cross browser compatibility — xjedam, Dec 16 '14 at 17:48
This question might have benefited from [this Opera tag split request](http://meta.stackoverflow.com/questions/276860/tag-split-or-add-request-opera-presto-vs-opera-blink). If @Bergi's answer helped you to solve your issue, please don't forget to accept it. — Amos M. Carpenter, Dec 17 '14 at 00:01

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

According to both caniuse, MDN and this SO answer, (pre-Blink) Opera does not support the defer attribute. However, there seems to be a polyfill available.

edited May 23 '17 at 11:57

Community

1
1

answered Dec 16 '14 at 18:10

Bergi

630,263
148
957
1,375

i was just thinking if this might be the problem! thanks, i'll try it out. – LubosB Dec 16 '14 at 18:36
If it doesn't work, you'll need to use any of the techniques presented in [this thread](http://stackoverflow.com/q/14028959/1048572) – Bergi Dec 16 '14 at 18:47
1

Thanks. Since I'm focusing on speed here, I just used the dirty method of moving my bgimg.js script to the end of the page and it's loading properly now. – LubosB Dec 16 '14 at 23:26

JS error only in Opera - Cannot convert x to object

1 Answers1