SYNTAX_ERR: DOM Exception 12 - Hmmm

Question

I have been working on a small slideshow / public display for a client that uses HTML5 Rock's Slideshow code. I have run into a DOM Exception 12 - a syntax error that is supposedly related to CSS selectors - while monkeying around with it... but I can't trace it back to any changes I made in the code. I am thinking it might be something that was uncovered as I added features.

I have traced it down to this object (live version here):

var SlideShow = function(slides) {
    this._slides = (slides || []).map(function(el, idx) {
      return new Slide(el, idx);
    });
    var h = window.location.hash;
    try {
      this.current = h;
    } catch (e) { /* squeltch */ }
    this.current = (!this.current) ? "landing-slide" : this.current.replace('#', '');
    if (!query('#' + this.current)) {
      // if this happens is very likely that someone is coming from
      // a link with the old permalink format, i.e. #slide24
      alert('The format of the permalinks have recently changed. If you are coming ' +
             'here from an old external link it\'s very likely you will land to the wrong slide');
      this.current = "landing-slide";
    }
    var _t = this;
    doc.addEventListener('keydown',
        function(e) { _t.handleKeys(e); }, false);
    doc.addEventListener('touchstart',
        function(e) { _t.handleTouchStart(e); }, false);
    doc.addEventListener('touchend',
        function(e) { _t.handleTouchEnd(e); }, false);
    window.addEventListener('popstate',
        function(e) { if (e.state) { _t.go(e.state, true); } }, false);
};

Instantiation of SlideShow() (line 521 in main.js):

var slideshow = new SlideShow(queryAll('.slide'));

Calling queryAll('.slide') returns an array of all the slides with an class of .slide. However, when passing queryAll('.slide') as a parameter for instantiating SlideShow(), it returns a DOM Exception 12 error.

Has anybody seen this before?

Denti

Are you sure it returns an array, or might it return a node list? – Illiberal

DOM Exception 12 is a syntax error, e.g. a property has been mis-set. My guess is that it is your event listeners - the act of setting them, that is. I would think that browsers that don't support either the addEventListener fully or that don't support events such as 'touchstart', 'touchend', and 'popstate' don't like that you are trying to listen to them. What browser were you using btw? – Morphogenesis

Answer 1

You are using illegal id-attributes(illegal before HTML5) inside the document, e.g. 2-slide . Fix them.

To explain: to solve the known misbehaviour of element.querySelectorAll() the selector .slide will be internally rewritten(by using the id of the element). This will result in something like that:

#2-slide .moreselectors

...and forces the error, because an ID may not start with a Number.

See the fiddle: http://jsfiddle.net/doktormolle/FGWhk/

Assignment

Thank you so much... such a silly problem - I guess it is 1:00AM my time. Been a long day. Thanks again! – Denti

In HTML5 an ID can start with a number. If you want to select that element based on its ID, you just have to escape the ID so that it becomes a valid CSS identifier. Here’s a tool that does that for you: mothereff.in/css-escapes#02-slide – Hollander

Answer 2

If you are coming here after searching for this error in HTML5 rocks slides:

For some reason they remove the class 'to-build' with the following:

toBuild[0].classList.remove('to-build', '');

That breaks all slide decks the use build, even the Google demo right now is broken

Just change line 220 of default.js to

toBuild[0].classList.remove('to-build');

all is well!

Londalondon

Answer 3

In my case it was using self.postMessage(e.data); in the main thread while using web workers.

I know it's not related to the OP's issue, but it's an odd error so I'm leaving this here in hope it helps others.

Indore

Answer 4

Same problem to me but in my case a try to get elements from their attribute

document.querySelectorAll('input[name="path"]')

and SYNTAX_ERR: DOM Exception 12 occurred only on Safari. So i've change it to get the element directly from class and now work fine.

Alible

Answer 5

You can escape the quotes like in applescript then no issue on safari

do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"

Photoperiod