我是 Java 脚本的新手，我正在做一个事件，即当我单击加号按钮时，css 样式被打印，但值没有增加。和点击菜单按钮一样，最后一个孩子不会被删除......
我想打印 css 样式和递增值以及相同的递减值并删除最后一个孩子........
下面是我的 html
var counter = 0;
var numBoxes = 10;
function myFun(showDiv) {
var ele = document.getElementById(showDiv + counter);
if(counter>numBoxes) {
document.getElementById("incBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Limit Is Over";
});
}
else {
ele.style.display = "block";
}
if(counter>0) {
ele.style.display = "block";
}
else {
document.getElementById("decBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Limit Is Over";
});
}
}<div class="divInfo">
<span id="box1" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;"></span>
<span id="box2" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
<span id="box3" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
<span id="box4" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
<span id="box5" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
<span id="box6" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
<span id="box7" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
<span id="box8" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
<span id="box9" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
<span id="box10"style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
</div>
<div class="divInfo2">
<input type="text" id="value" value="0">
</div>
<div class="IncDrc">
<input id="incBtn" type="button" value="+" onclick="counter++; myFun('box');">
<input id="decBtn" type="button" value="-" onclick="counter--; myFun('box');">
</div>
<div>
<p id="demo"></p>
</div>我已经为您要执行的操作传递了一个额外的参数。根据它的值，您可以根据需要执行代码。
更新 1 :-
var counter = 0;
var numBoxes = 10;
function myFun(showDiv,operation) {
var containerElement = document.getElementById("container");
if(operation == "increment"){
if(counter >= numBoxes){
document.getElementById("demo").innerHTML = "Limit Is Over";
return;
}
else{
document.getElementById("demo").innerHTML = "";
}
counter++;
var spn = document.createElement("span");
spn.id = "box"+counter;
spn.style = "border: 1px solid black; background: #CCCCCC; padding: 2px;height:90px;width:10px;float:left;";
containerElement.appendChild(spn);
}
else if(operation == "decrement"){
document.getElementById("demo").innerHTML = "";
if(counter == 0){
return;
}
containerElement.removeChild(containerElement.lastChild);
counter--;
}
var inputBox = document.getElementById("value");
inputBox.value = counter;
/*
if(counter>numBoxes) {
document.getElementById("incBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Limit Is Over";
});
}
else {
}
if(counter>0) {
ele.style.display = "block";
}
else {
document.getElementById("decBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Limit Is Over";
});
}*/
}<div class="divInfo" id="container">
</div>
<div class="divInfo2">
<input type="text" id="value" value="0">
</div>
<div class="IncDrc">
<input id="incBtn" type="button" value="+" onclick="myFun('box','increment');">
<input id="decBtn" type="button" value="-" onclick="myFun('box','decrement');">
</div>
<div>
<p id="demo"></p>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句