javascript - Failed to execute Matches on Element: not a valid selector - Stack Overflow

admin管理员组

文章数量:1393880

Some time ago I wrote the following code to show certain items on my html page:

<div id="gameField">
@foreach (var item in Model.Characters)
{
    <div class="char" id="@item.Id"  onclick="ShowDropDown(event,this.id)">
        <img src="~/Content/Images/Characters/@item.ImageSource" class="character" alt="Character" />
        <img src="~/Content/Images/Cross.png" class="cross" alt="Cross" />
        <p>@item.Name</p>
    </div>
}
<div id="myDropdown" class="dropdown-content">
    <a href="#" onclick="Flip()">Flip</a>
    <a href="#" onclick="Highlight()">Highlight</a>
    <a href="#" id="Guess" >Guess</a>
    <a href="#" class="red" onclick="Hide()">Hide</a>
</div>

the id is an number between 0 and 24.

with the following JavaScript code:

function ShowDropDown(event, clicked_id) {
        var Dropdown = document.getElementById("myDropdown");
        var x = event.clientX;
        var y = event.clientY;
        id = clicked_id;
        Dropdown.style.top = (y + 10) + 'px';
        Dropdown.style.left = (x + 10) + 'px';
        Dropdown.classList.toggle("show");
}

window.onclick = function (event) {
if (!event.target.matches(id)) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
        }
    }
}
}

Now everytime when I click on an item I get the following error message in the console:

Uncaught DOMException: Failed to execute 'matches' on 'Element': '13' is not a valid selector. at window.onclick (http://localhost:58203/Game?newgame=True&gameId=0&mode=2:131:31) window.onclick @ Game?newgame=True&gameId=0&mode=2:131

where the 13 ofcourse changes when I click a different item. The thing is, the code works, but this error message still shows up in the console, I've also tried to put a character in front of the id, but the error message still appears

Some time ago I wrote the following code to show certain items on my html page:

<div id="gameField">
@foreach (var item in Model.Characters)
{
    <div class="char" id="@item.Id"  onclick="ShowDropDown(event,this.id)">
        <img src="~/Content/Images/Characters/@item.ImageSource" class="character" alt="Character" />
        <img src="~/Content/Images/Cross.png" class="cross" alt="Cross" />
        <p>@item.Name</p>
    </div>
}
<div id="myDropdown" class="dropdown-content">
    <a href="#" onclick="Flip()">Flip</a>
    <a href="#" onclick="Highlight()">Highlight</a>
    <a href="#" id="Guess" >Guess</a>
    <a href="#" class="red" onclick="Hide()">Hide</a>
</div>

the id is an number between 0 and 24.

with the following JavaScript code:

function ShowDropDown(event, clicked_id) {
        var Dropdown = document.getElementById("myDropdown");
        var x = event.clientX;
        var y = event.clientY;
        id = clicked_id;
        Dropdown.style.top = (y + 10) + 'px';
        Dropdown.style.left = (x + 10) + 'px';
        Dropdown.classList.toggle("show");
}

window.onclick = function (event) {
if (!event.target.matches(id)) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
        }
    }
}
}

Now everytime when I click on an item I get the following error message in the console:

Uncaught DOMException: Failed to execute 'matches' on 'Element': '13' is not a valid selector. at window.onclick (http://localhost:58203/Game?newgame=True&gameId=0&mode=2:131:31) window.onclick @ Game?newgame=True&gameId=0&mode=2:131

where the 13 ofcourse changes when I click a different item. The thing is, the code works, but this error message still shows up in the console, I've also tried to put a character in front of the id, but the error message still appears

• javascript
• c#
• asp-mvc

Share Improve this question Follow edited Nov 28, 2018 at 13:18 ArunPratap 5,02077 gold badges2828 silver badges4545 bronze badges asked Nov 28, 2018 at 13:13 Kev_TKev_T 70522 gold badges1111 silver badges4343 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

.matches(selector) is supposed to get a CSS selector, so you should add a # before the ID:

if (!event.target.matches('#' + id)) {

But, the ID can't be just a number, so you would also have to append a character before the number of the ID to make it work properly.

See more: https://developer.mozilla/en-US/docs/Web/API/Element/matches

I was using a numeric alone as an ID value.

I created an alphanumeric ID and then the query worked.

Apparently CSS ID selectors are not allowed to start with a numeric character.

Right now a quick search and I was not able to find a source in the MDN docs or anything but CSS Tricks can help you find out more.

本文标签： javascriptFailed to execute Matches on Element not a valid selectorStack Overflow