我制作了这个计数器，但我希望根据正值或负值为 id=\'clicks\' 着色，并基于此附加文本。var clicks = 0; function clickplus() { cli...
我制作了这个计数器，但我希望根据正值或负值为 id=\'clicks\' 着色，并基于此附加文本。
var clicks = 0;
function clickplus() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
var clicks = 0;
function clickless() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
} #btn_plus{
background-color: #04AA6D; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;}
#btn_less{
background-color: red; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;}<body style="background-color:#F0F0F0">
<center>
</br></br></br>
<h1>
<p style="color:#002244">COUNT: <a id="clicks">0</a></p>
</h1>
<button id="btn_plus" type="button" onClick="clickplus()">+1</button>
<button id="btn_less" type="button" onClick="clickless()">-1</button>
</center>
</body>有人可以帮忙吗？id=\'clicks\' 如果是负数则显示红色，如果是正数则显示绿色，并根据此显示正/负文本。
使用 document.getElementById("clicks").style.color = color;
<body style="background-color:#F0F0F0">
<center></br></br></br><h1><p style="color:#002244">CONTAGEM: <a id="clicks">0</a></p></h1>
<button id="btn_plus" type="button" onClick="clickplus()">+1</button>
<button id="btn_less" type="button" onClick="clickless()">-1</button>
</center>
</body>
<script>
var clicks = 0;
function setColorAndText(clicks){
let color = (clicks<0)?"red":(clicks>0)?"green":"black";
let appendText = (clicks<0)?"negative":(clicks>0)?"positive":"";
document.getElementById("clicks").innerHTML = clicks + " " + appendText;
document.getElementById("clicks").style.color = color;
}
function clickplus() {
clicks += 1;
setColorAndText(clicks);
}
function clickless() {
clicks -= 1;
setColorAndText(clicks);
}
</script>
<style>
#btn_plus{
background-color: #04AA6D; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;}
#btn_less{
background-color: red; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;}
</style>