递增和递减答案

【问题标题】：Increment and decrement递增和递减
【发布时间】：2016-02-18 07:04:37
【问题描述】：

我想为值的递增和递减制作 2 个按钮。因此，如果我增加 var k = 4 的值并按下减量按钮，它会将 4 的值减少到 3

我试过了

var k = 1;

function qtrFunction(k, v) {
  document.getElementById('qtrrr').innerHTML = k;
  k++;
  document.getElementById('qtrrr').innerHTML = v;
  v--;
}
v = k;
console.log(k);

<div style="color:white; font-size:70px;">QTR <span id="qtrrr" style="color:green; border-radius:10px; padding:5px 20px 5px 20px;">0</span>
</div>


<button onclick="qtrFunction(k)" style="padding:15px">Increase Quart</button>
<button onclick="qtrFunction(v)" style="padding:15px">Decrease Quart</button>

【问题讨论】：

那么你得到了什么错误？此外，您已声明函数 qtrFunction 接受两个参数但只传递一个。
'Javascript 增量'？好的：var foo = 1; foo += javascript 让我快速为您编辑标题，对吗？ ;-)

标签： javascript html

【解决方案1】：

避免使用innerHTML，因为它会触发对设置值字符串的解析，这是一项昂贵的操作（尽管它比document.write 好）。考虑改为设置.textContent。
您尚未声明 v 本地，因此您会收到有关未定义符号的错误。
您不需要两个值。

像这样：

<script type="text/ecmascript">
    var value = 0; // initialize a global variable

    function updateAndDisplay(increment) {
        if( increment ) value++;
        else            value--;
        document.getElementById('qtrrr').textContent = value;
    }
</script>

<button onclick="updateAndDisplay(true)" style="padding:15px">Increase Quart</button>
<button onclick="updateAndDisplay(false)" style="padding:15px">Decrease Quart</button>

【讨论】：

你也不需要两个函数。只是一个标志
@mplungjan 我已经简化了我的答案
updateAndDisplay(1) ... updateAndDisplay(-1) ... value+=increment;

【解决方案2】：

Javascript

<script>
    var k = 1;
    function qtrFunction(V) {
        if(V=="I")
        {
          k++;
        }
        else
        {
          k--;
        }
        document.getElementById('qtrrr').innerHTML = k;
        console.log(k); 
    }       

</script>

HTML

<div style="color:white; font-size:70px;">QTR  <span id="qtrrr" style="color:green; border-radius:10px; padding:5px 20px 5px 20px;">0</span></div>


<button onclick="qtrFunction('I')" style="padding:15px">Increase Quart</button>
<button onclick="qtrFunction('D')" style="padding:15px">Decrease Quart</button>

【讨论】：

【解决方案3】：

试试这个。它可能会对你有所帮助。

var cnt = 0;
function qtrFunction(val) {
  if(val=='k'){
    cnt = document.getElementById('qtrrr').innerHTML = (cnt+1);	        
  }else {
    cnt = document.getElementById('qtrrr').innerHTML = (cnt-1);
  }
}

<div style="color:white; font-size:70px;">QTR  <span id="qtrrr" style="color:green; border-radius:10px; padding:5px 20px 5px 20px;">0</span></div>
		
		
<button onclick="qtrFunction('k')" style="padding:15px">Increase Quart</button>
<button onclick="qtrFunction('v')" style="padding:15px">Decrease Quart</button>

【讨论】：

【解决方案4】：

var k = 1;
    function qtrFunction(condition) {
        document.getElementById('qtrrr').innerHTML= condition?k++:k--;
    } 

<button onclick="qtrFunction(true)" style="padding:15px">Increase Quart</button>
<button onclick="qtrFunction(false)" style="padding:15px">Decrease Quart</button>

【讨论】：

【解决方案5】：

这应该会有所帮助：

var sampleVar = 0;

document.getElementById('qtrrr').innerHTML = sampleVar;

function stepping(step) {
  sampleVar += step;
  document.getElementById('qtrrr').innerHTML = sampleVar;
}

<div style="color:white; font-size:70px;">
  QTR <span id="qtrrr" style="color:green; border-radius:10px; padding:5px 20px 5px 20px;"></span>
</div>

<button onclick="stepping(1)" style="padding:15px">Increase Quart</button>
<button onclick="stepping(-1)" style="padding:15px">Decrease Quart</button>

【讨论】：

【解决方案6】：

您可以执行以下操作：

调用 js 函数时只需传递操作（incr 或 decr），然后获取当前值并根据按下的按钮 incr 或 decr 值。之后只需将其放回原处。

function qtrFunction(action) {
  var value = document.getElementById("qtrrr").innerHTML;
  if (action == "incr") {
    value++;
  } else {
    value--;
  }
  document.getElementById("qtrrr").innerHTML = value;
}

<div style="color:white; font-size:70px;">QTR <span id="qtrrr" style="color:green; border-radius:10px; padding:5px 20px 5px 20px;">0</span>
</div>


<button onclick="qtrFunction('incr')" style="padding:15px">Increase Quart</button>
<button onclick="qtrFunction('decr')" style="padding:15px">Decrease Quart</button>

【讨论】：

你真的应该解析那个计数器并去掉不再使用的 k

【解决方案7】：

This Code May be Helpful for you

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <script type="text/javascript">
        var value = 0; // initialize a global variable

        function incrementAndDisplay() {
        value++;
       alert(value);
        document.getElementById('qtrrr').textContent = value;

        }
       function decrementAndDisplay() {
        value--;
       alert(value);
        document.getElementById('qtrrr').textContent = value;

        }

        console.log(value);


   </script>
</head>
<body>
<button onclick="incrementAndDisplay()" style="padding:15px">Increase Quart</button>
<button onclick="decrementAndDisplay()" style="padding:15px">Decrease Quart</button>
</body>
</html>

【讨论】：