我目前正在开发一个小型“项目”（如果你可以这样称呼它的话）。 这是非常简单的两个按钮，它们影响单独工作的
元素，但现在我决定使用对象和 DOM 来更好地理解它。所以我在 p 下面添加了一个排名，应该是第一、第二……依此类推，具体取决于你是哪个数字。
—-HTML—-
<body>
<div id="OuterShell">
<div id="ContainsButtons">
<button id="AddPs">Add</button>
<button id="RemovePs">Remove</button>
</div>
<div id="ContainsPs">
<p id="text" class="text">0</p>
</div>
</div>
<script src="./TestJS.js"></script>
</body>
</html>
——结束—— 现在我的问题是，它要么删除我当前添加的新排名，删除所有内容，要么什么都不删除，只是添加越来越多的段落。
—-JS—-
var Text = document.getElementById("text");
var B1 = document.getElementById("AddPs");
var B2 = document.getElementById("RemovePs");
var div1 = document.getElementsByTagName("div")[2];
var counter = 0;
var x = false;
function AddOne(){
if(counter < 10){
counter++
update();
}
else{
Text.innerText = TextStored.Limit;
}
}
function RemoveOne(){
if(counter > 0){
counter--
update();
}
else{
Text.innerText = TextStored.Limit;
}
}
function update(){
Text.innerText = counter;
var ranking = document.createElement("p");
var ItsText = document.createTextNode(TextStored.Text[counter]);
ranking.appendChild(ItsText);
div1.appendChild(ranking);
if(x){
var deleted = ranking.parentNode;
deleted.removeChild(ranking);
}
x = true;
return ranking;
}
var TextStored = {
Text: [0,"1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th"],
Limit: "You reached the limit"
};
B1.onclick = AddOne;
B2.onclick = RemoveOne;
——结束——-
我首先自己尝试了不同的代码放置，使用不同的变量，甚至试图以复杂的方式解决它，但这也不起作用，然后我最后在网上查找了它，但我没有找到有用的东西（或者没有找到有用的东西）不明白/谷歌它正确。 什么都不起作用，我只是更好地理解了为什么它不起作用以及 PC 如何读取代码。
——期待—— 当我按下一个按钮（例如添加）时，它应该输出这个
1 第一
当我再次按“添加”时，它应该更新两个数字
2 第二
我无法更新第二个，也不知道该怎么办。
你让事情变得有点复杂了，你已经掌握了如何更改元素文本的知识，无需创建元素、查询元素等。在 HTML 中定义它（
<div id="rank">addEventListeneron*注意 HTML 中的新元素和 updated
update()var Text = document.getElementById("text");
var Rank = document.getElementById("rank");
var B1 = document.getElementById("AddPs");
var B2 = document.getElementById("RemovePs");
var ContainsPs = document.getElementById("ContainsPs");
var counter = 0;
var x = false;
function AddOne() {
if (counter < 10) {
counter++
update();
} else {
Text.textContent = TextStored.Limit;
}
}
function RemoveOne() {
if (counter > 0) {
counter--
update();
} else {
Text.textContent = TextStored.Limit;
}
}
function update() {
Text.textContent = counter;
Rank.textContent = TextStored.Text[counter];
}
var TextStored = {
Text: [0, "1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th"],
Limit: "You reached the limit"
};
B1.addEventListener("click", AddOne);
B2.addEventListener("click", RemoveOne);<div id="OuterShell">
<div id="ContainsButtons">
<button id="AddPs">Add</button>
<button id="RemovePs">Remove</button>
</div>
<div id="ContainsPs">
<p id="text" class="text">0</p>
<p id="rank" class="text"></p>
</div>
</div>