我是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>
答案 0 :(得分：1)
我已经为您要执行的操作传递了一个额外的参数。根据其值，您可以根据需要执行代码。
更新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>
答案 1 :(得分：0)
这样的东西？
var count = 0;
function myFunction(){
count++;
console.log(count)
}<button onclick="myFunction()">click</button>
答案 2 :(得分：0)
您可以将操作作为参数传递给您的函数
var count = 0;
function myFunction(action, div) {
if(action == 'add') {
count++;
else {
count--;
}
// do something else
}
然后在你的HTML上
<button type="button" onclick="myFunction('add', 'box')">+</button>
<button type="button" onclick="myFunction('sub', 'box')">-</button>
答案 3 :(得分：0)
这是您修改后的功能，以获得所需的结果。
<div class="divInfo2">
<input type="text" id="value" value="0">
</div>
<div class="IncDrc">
<input id="incBtn" type="button" value="+" onclick="myFun('inc','box');">
<input id="decBtn" type="button" value="-" onclick="myFun('dec','box');">
</div>
<div>
<p id="demo"></p>
</div>
您的javascript代码将是这样的 -
var counter = 0;
var numBoxes = 10;
function myFun(task, showDiv) {
if (task == 'inc') {
counter++;
} else if (task == 'dec') {
counter--;
}
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";
});
}
}
答案 4 :(得分：0)
您可以尝试这样的事情：
var counter = 0;
var numBoxes = 10;
function myFun(action, showDiv) {
if (action == 'add') {
counter++;
}else{
counter--;
}
if (counter > 0 && counter > numBoxes) {
document.getElementById("demo").innerHTML = "Limit Is Over";
}
else {
if (counter > 0) {
if (action == 'sub' && ((counter + 1) > 0)) {
var lastEle = document.getElementById(showDiv +
(counter + 1));
lastEle.style.display = "none";
} else {
var ele = document.getElementById(showDiv + counter);
ele.style.display = "block";
}
var inputValue =
document.getElementById("value").setAttribute('value', counter);
}
else {
document.getElementById("demo").innerHTML = "Limit Is Over";
}
}
}
以HTML格式
<input id="incBtn" type="button" value="+" onclick="myFun('add','box');">
<input id="decBtn" type="button" value="-" onclick="myFun('sub','box');">