-2

I am trying convert below lines in javascript but getting below error

Error: Failed to execute 'querySelectorAll' on 'Document': '.usuggest li[aria-selected!='true']' Jquery code

$(".usuggest li[aria-selected!='true']").eq(0).attr('aria-selected', 'true');

javascript

document.querySelectorAll(".usuggest li[aria-selected!='true']")[0].setAttribute('aria-selected', 'true')
user944513
  • 12,247
  • 49
  • 168
  • 318
  • Read the complete error message, and most importantly the part you've cut off before posting it here, and you will find the problem: `'.usuggest li[aria-selected!='true']' is not a valid selector` – Andreas May 11 '21 at 17:38
  • [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask), [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) – Andreas May 11 '21 at 17:39
  • @mplungjan The selector is not invalid when used with jQuery, as mentioned in the dupe target or here: https://api.jquery.com/attribute-not-equal-selector/ – Andreas May 11 '21 at 17:53
  • @Andreas Wow. Never knew (and would never have used it either) : https://jsfiddle.net/mplungjan/fn54u3gw/ – mplungjan May 11 '21 at 18:02

2 Answers2

2

The reference at https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll mentions that the selector that you pass must be a valid CSS selector. In fact, if you look at the full error generated by your code, it gives the following:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.usuggest li[aria-selected!='true']' is not a valid selector.

Telling us that there is an issue with the selector.

Moving to the CSS selectors at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors and attribute selectors at https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors, we see that to select an attribute, != is not a valid operator. From Can't find a "not equal" css attribute selector we can then see that we would need to prepend with :not to apply the inverse and then do an equality check.

This gives us the following updated JavaScript

document.querySelectorAll(".usuggest li:not([aria-selected='true'])")

Which should do what you want.

This then makes the entire query:

document.querySelectorAll(".usuggest li:not([aria-selected='true'])")[0].setAttribute('aria-selected', 'true');

Since the querySelectorAll may not return results, I would recommend doing the following:

const falseListItems = document.querySelectorAll(".usuggest li:not([aria-selected='true'])");

if (falseListItems.length > 0) {
    falseListItems[0].setAttribute('aria-selected', 'true');
}

If you can guarantee that the query will lead to a single result, then the extra if statement is not necessary of course.

Hive7
  • 3,599
  • 2
  • 22
  • 38
-2

You can split the command into 2-3 lines, to debug easily,

const element = document.querySelectorAll(".usuggest li[aria-selected!='true']");

// you can check value 0f element here: console.log(element);

element[0].setAttribute('aria-selected', 'true');

If this too cause error, please reply with output of console.log(element);

Piyush Gupta
  • 62
  • 1
  • 5