我设置了一个带有两个标题和两个按钮的网页。在按下任何按钮之前，网页看起来与以下内容完全相同：
Counter-1：（某个数字） [按钮]
柜台2：（某个数字） [按钮]
如果我单击第一个按钮，某个数字就会增加 1。 如果我单击第二个按钮，某个数字 会减少 1。
此外，当我单击第一个按钮（增量按钮）时，列表项会添加到网页。当我单击第二个按钮（递减按钮）时，最后添加的列表项**将从网页中删除**。
两个按钮都可以工作并实现其目的（明智地递增/递减），当我单击第一个按钮时，列表项确实会添加到网页中。当我尝试按所述按第二个按钮删除最后添加的列表项时，就会出现问题。
这是 html 部分。没什么不寻常的。两个标题和两个按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Counter-1: <span id="counter-one">0</span></h1>
<button id="increment">click me</button>
<h1>Counter-2: <span id="counter-two">0</span></h1>
<button id="decrement">click me</button>
<ul id="list-items"></ul>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
这是 JavaScript 部分。我从 HTML 文档中获取两个按钮，在 HTML 文档上设置了一个空列表，我想在每次单击第一个按钮时填充一个列表项（使用 JavaScript，从而使按钮具有交互性）。
const incrementButton = document.getElementById("increment");
const decrementButton = document.getElementById("decrement");
const ulElement = document.getElementById("list-items");
let counter = 0;
function incrementCounter() {
const counterInc = document.getElementById("counter-one");
counter++;
counterInc.innerText = counter;
//create an element
const li = document.createElement("li");
li.setAttribute("data-counter", counter);
li.innerHTML = "<b>Something</b> " + counter;
console.log(li);
//append it to the list
ulElement.appendChild(li);
}
function decrementCounter() {
//remove an element
const li = ulElement.querySelector("[data-counter = " + counter + "]");
li.remove();
const counterDec = document.getElementById("counter-two");
counter--;
counterDec.innerText = counter;
}
incrementButton.addEventListener("click", incrementCounter);
decrementButton.addEventListener("click", decrementCounter);
递增和递减值的机制工作正常，并且列表项的附加也有效，如上所述。
但是这条线： const li = ulElement.querySelector("[data-counter = " + counter + "]");
导致以下错误：
Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '[data-counter = 4]' is not a valid selector. at HTMLButtonElement.decrementCounter
ulElement.querySelector(`[data-counter="${counter}"]`);
--- 或者，如果您坚持使用双引号，请使用反斜杠对其进行缩放，例如：
ulElement.querySelector("[data-counter=\""+ counter +"\"]");--- 或者，使用单引号来保留双引号，例如：
ulElement.querySelector('[data-counter="'+ counter +'"]');