1

I received the following error in my ionic 1/angularjs cordova app. Failed to execute 'querySelector' on 'Document': '#04' is not a valid selector.

I dynamically build the id in html and then get the selected id in my controller. 

<label id="{{levelIndex}}0" class="{level-selected:false}">{{vm.config.tones[0]}}</label>

My objective is to just assign a class to the selected item.

vm.selectLevelTone = function (level, tone) {
        var selection = JSON.parse(localStorage.getItem('hairSelection')) || {};
        selection.starting = {
            level: level,
            tone: tone
        }

        localStorage.setItem('hairSelection', JSON.stringify(selection));
        vm.selectedStartLevel = config.levels[level];
        vm.selectedStartTone = config.toneDesc[tone];
        var levelTone = '#' + level + tone;
        var note = angular.element(document.querySelector(levelTone));
        note.addClass('level-selected');
        $state.go('level-ending', { cId: $stateParams.cId });
    };

I tried using get element by id, but that doesn't work either.

According to this post Using querySelector with IDs that are numbers, I need to escape the number. I have tried to build my id using "\" + level but I receive an error on the escape character. I did finally get the element using the following. var levelTone = '#' + level + tone;
var res = levelTone.substring(1, levelTone.length); var note = document.querySelector('[id="' + res + '"]') In the first line I append a # to my level + tone so that integers will append, not add In the second line, I remove the # sign (I know there must be an easier way, just don't know what it is.) In the 3rd line, I take the advice Phil and use '[id="' + res + '"]' Now I get an error on the note.addclass line.

Community
  • 1
  • 1
Sheri Trager
  • 842
  • 3
  • 13
  • 33
  • thats not angular thats just pure js – Bowofola May 17 '17 at 02:32
  • 1
    the issue is that `#04` isn't a valid selector (regardless if it exists or not) - the selector needs to be `[id="04"]` INCLUDING the quotes around 04 – Jaromanda X May 17 '17 at 02:33
  • It's especially odd that the `id` should end in `0` given `id="{{levelIndex}}0"` – Phil May 17 '17 at 02:34
  • 1
    In any case, `04` **is** a valid HTML5 `id` attribute value. Try `document.querySelector('[id="' + level + tone + '"]')` or **much more simply**, `document.getElementById(level + tone)` – Phil May 17 '17 at 02:36
  • I tried hard coding in an id of "04" and still received the error Failed to execute 'querySelector' on 'Document': '02' is not a valid selector. var note = angular.element(document.querySelector("04")); – Sheri Trager May 17 '17 at 02:59
  • Since both level and tone are integers, won't JavaScript just add them together. – Sheri Trager May 17 '17 at 03:00
  • Thanks to Phil's lead I came across a post http://www.dotnetlearners.com/blogs/view/169/add-or-remove-css-class-to-html-element-in-angularjs.aspx that led me to the answer. var levelTone = '#' + level + tone; var res = levelTone.substring(1, levelTone.length); angular.element(document.querySelector('[id="' + res + '"]')).addClass("level-selected"); – Sheri Trager May 17 '17 at 03:33

0 Answers0