单击按钮时如何创建多个标记?当它们太多的时候，我该如何让它们消失

Question

我有一个div，我在里面创建段落标记，这就像网站上所做的事情的日志(就像完成操作时显示的消息(。目前，我有两个按钮使用相同的功能来发送消息。然而，我希望有一个按钮处于冷却状态，并在点击时和冷却结束时发送消息。第二个按钮保持原样。

我还希望当创建了一定数量的段落标记时(比如当有10个以上时，最后一个会被删除(，将其删除。

这是我的：

var credits = 0;
var clickPower = 1;
function addCred() {
credits = credits + clickPower;
document.getElementById('credits').innerHTML = credits + " Skatts";
};
function addLog(logBefore, logAfter) {
var par = document.createElement("p");
var node1 = document.createTextNode(logBefore);
var node2 = document.createTextNode(logAfter);
par.appendChild(node1);
var element = document.getElementById("logs");
element.appendChild(par);
};

#logs {
display: flex;
flex-direction: column-reverse;
}
#logs p {
margin-top: 0px;
}

<div id="credits"></div>
<button onclick="addLog('Hunt begun', 'Hunt successful! You now have ' + credits + ' Skatts'); addCred();">HUNT</button>
<br>
<button onclick="addLog('Resources sold')">SELL</button>
<div id="logs"></div>

Answer 1

var credits = 0;
var clickPower = 1;
function addCred() {
credits = credits + clickPower;
document.getElementById('credits').innerHTML = credits + " Skatts";
};
function addLog(logBefore, logAfter) {
var par = document.createElement("p");
var node1 = document.createTextNode(logBefore);
var node2 = document.createTextNode(logAfter);
par.appendChild(node1);
var element = document.getElementById("logs");
// Here you can also use element.childNodes.length
const count = document.getElementById("logs").getElementsByTagName("p").length;
if(count >= 10){
element.removeChild(element.childNodes[0]);
}
element.appendChild(par);
};

#logs {
display: flex;
flex-direction: column-reverse;
}
#logs p {
margin-top: 0px;
}

<div id="credits"></div>
<button onclick="addLog('Hunt begun', 'Hunt successful! You now have ' + credits + ' Skatts'); addCred();">HUNT</button>
<br>
<button onclick="addLog('Resources sold')">SELL</button>
<div id="logs"></div>

Answer 2

我把setTimeout((放在Hunt按钮里面。每次点击"狩猎"按钮，它都会开始倒计时。当它完成时，上面写着Hunt successful! You now have ' + credits + ' Skatts')。它可能还不是你想要的。因为你说when the cooldown is up. The second button stays like it is tho.的时候我还是很困惑

var credits = 0;
var clickPower = 1;
function addCred() {
credits += clickPower;
document.getElementById('credits').innerHTML = credits + " Skatts";
};
function addLog(logBefore, logAfter) {
var par = document.createElement("p");
var node1 = document.createTextNode(logBefore);
var node2 = document.createTextNode(logAfter);
par.appendChild(node1);
var element = document.getElementById("logs");
// Check if div logs has more than 10 childElement then delete it
if (element.childElementCount >= 10) {
element.removeChild(element.childNodes[0]);
}
element.appendChild(par);
//set cooldown when it done it say 
setTimeout(function() {
let credits = document.getElementById('credits').innerHTML;
let whatToSay = 'Hunt successful! You now have ' + credits;
let parForCooldown = document.createElement("p");
if (element.childElementCount >= 10) {
element.removeChild(element.childNodes[0]);
}
parForCooldown.appendChild(document.createTextNode(whatToSay));
element.appendChild(parForCooldown);
}, 3000);
};

#logs {
display: flex;
flex-direction: column-reverse;
}
#logs p {
margin-top: 0px;
}

<div id="credits"></div>
<button onclick="addLog('Hunt begun', 'Hunt successful! You now have ' + credits + ' Skatts'); addCred();">HUNT</button>
<br>
<button onclick="addLog('Resources sold')">SELL</button>
<div id="logs"></div>