如何使用加號和減號按鈕創建一個傳遞參數的計數器，這樣我就沒有兩個使用兩個單獨的函數？

Question

我創建了一個帶加號和減號按鈕的計數器。 計數器工作正常，但我想通過將參數傳遞給我的函數來簡化我的代碼，該函數根據單擊的按鈕執行加號和減號計算。 目前我有兩個單獨的函數執行此操作，但我想傳遞'result'變量，因為這是告訴我的腳本是否要添加1或減1的部分，但是我不確定如何執行此操作？

我已經在下面附上了我的JavaScript，以顯示我到目前為止的內容。

document.getElementById('minus').onclick = function() {
    var counter = document.getElementById('counter').innerHTML;
    var parsed = parseInt(counter);
    var result = parsed -1;
    document.getElementById('counter').innerHTML = result;
}

document.getElementById('plus').onclick = function() {
    var counter = document.getElementById('counter').innerHTML;
    var parsed = parseInt(counter);
    var result = parsed +1;
    document.getElementById('counter').innerHTML = result;
}

Answer 1

您可以使用curried函數將delta值“烘焙”到click點擊處理程序中：

function changeCount(delta) {
   return function () {
       var counter = document.getElementById('counter').innerHTML;
       var parsed = parseInt(counter);
       var result = parsed + delta;
       document.getElementById('counter').innerHTML = result;
   } 
}

document.getElementById('minus').onclick = changeCount(-1);
document.getElementById('plus').onclick = changeCount(1);

Answer 2

您可以使用相同的函數來修改計數器元素，然后將負整數或正整數作為參數傳遞給函數，如下所示：

document.getElementById('minus').onclick = modifyCount(-1);

document.getElementById('plus').onclick = modifyCount(1); 

//Just pass the integer into the function to modify the counter element
function modifyCount(val){
    const counter = document.getElementById('counter');
    counter.innerHTML = parseInt(counter.innerHTML) + val;
}

Answer 3

你可以使用curried函數。

以下內容應使您的代碼簡單並符合要求：

function getCounter(multiplier = 1) {
    return function () {
       var counter = document.getElementById('counter').innerHTML;
       var parsed = parseInt(counter);
       var result = parsed + (multiplier * 1);
       document.getElementById('counter').innerHTML = result;
    }
}

document.getElementById('minus').onclick = getCounter(-1);

document.getElementById('plus').onclick = getCounter(); // 1 is the default value

Curried函數基本上是返回另一個函數的函數。 內部函數可以訪問包裝函數中定義的變量。 在這里閱讀更多關於它們的信息： https ： //medium.com/javascript-scene/curry-and-function-composition-2c208d774983

Answer 4

onclick事件可能的解決方案：

  function count(clicked_id) { var counter = document.getElementById('counter').innerHTML; var parsed = parseInt(counter); let result = clicked_id == "minus" ? parsed - 1 : parsed + 1; document.getElementById('counter').innerHTML = result; } 

 <button onclick="count(this.id)" id="minus">-</button> <div id="counter">0</div> <button onclick="count(this.id)" id="plus">+</button> 

Answer 5

您可以使用單擊處理程序的第一個也是唯一的參數來獲取元素的ID。 然后使用三元命令來決定結果是遞增還是遞減。

function clickHandler(e) {
    var counter = document.getElementById('counter').innerHTML;
    var parsed = parseInt(counter);
    var result = e.target.id === 'plus' ? parsed + 1 : parsed - 1;
    document.getElementById('counter').innerHTML = result;
}

document.getElementById('minus').onclick = clickHandler;
document.getElementById('plus').onclick = clickHandler;

您還可以重寫方法以使用if而不是result變量。

以下是我認為的優化版本：

const counterElem = document.getElementById('counter');

function clickHandler(e) {
    counterElem.innerHTML =
        parseInt(counterElem.innerHTML) +
        (e.target.id === 'plus' ? 1 : -1);
}

document.getElementById('minus').onclick = clickHandler;
document.getElementById('plus').onclick = clickHandler;

Answer 6

我已將代碼修改為函數，您只需要在所需的事件上使用該函數。

function counterFunction(action) {
 var counter = document.getElementById('counter').innerHTML;
 var parsed = parseInt(counter);
 var result = '';
  if (action == 'minus') {
    result = parsed -1;
  }
  else if (action == 'plus') {
    result = parsed +1;
  }
  document.getElementById('counter').innerHTML = result;
}

如果您需要任何幫助，請告訴我。

Answer 7

1. 在Button標簽中，在OnClick事件中調用以下方法
2. 在'action'參數中，將按鈕值傳遞為'+'或' - '。

例如： <button type='button' onClick='return CounterUpdate("+")'>+</Button>

 function CounterUpdate(action) { var counter = document.getElementById('counter').innerHTML; var parsed = parseInt(counter); var result =parsed ; if(action=='+') { result = parsed +1; } else if(action=='-') { result = parsed -1; } document.getElementById('counter').innerHTML = result; }