Javascript 如何使用传递参数的加号和减号按钮创建计数器，以便我不'；你有两个不同的功能吗？

我创建了一个带有加号和减号按钮的计数器。计数器工作正常，但我想通过向函数传递一个参数来简化代码，该函数根据单击的按钮执行加号和减号计算。目前，我有两个单独的函数来执行此操作，但我想传递'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;
}

---

您可以使用

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函数基本上是返回另一个函数的函数。内部函数可以访问包装函数中定义的变量。在此处了解更多信息：

您可以创建一个curried函数，将增量值“烘焙”到单击处理程序中：

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);

---

onclick事件的可能解决方案：

函数计数（单击\u id）
{
var counter=document.getElementById（'counter'）.innerHTML；
var parsed=parseInt（计数器）；
让result=clicked_id==“减”？已解析-1：已解析+1；
document.getElementById（'counter'）.innerHTML=result；
}

-
0
+

您可以使用相同的函数修改计数器元素，然后只需将一个负整数或正整数作为参数传递给函数，如下所示：

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;
}

---

我已经将您的代码修改为一个函数，您只需要在需要的事件上使用该函数

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;
}

如果你需要帮助，请告诉我

在按钮标记中，在OnClick事件中调用下面的方法

在'action'参数中，将按钮值作为“+”或“-”传递

例如：

+

---

您可以使用click处理程序的第一个也是唯一一个参数来获取元素的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;

---

为什么是“乘数”？为什么要将该值乘以1（无运算）？为什么要命名“addOrSubtract”？它不应该像“兑换柜台”一样吗？参见Ned Howley对相同想法的回答，但没有这些奇怪之处。

1

是为了防止

未定义的
，最终产生
NaN
。关于函数名，您可能是对的。更新了答案：）这没什么大不了的，但对于其任务是更新*/*更改*/*修改计数器的函数来说，即使是“getCounter”也是一个奇怪的名称。（有关这些名称的使用，请参阅其他答案。）我对（新？）默认值没有问题。我反对的是
result=parsed+（乘数*1）
，而不是像
result=parsed+delta
这样的东西。我不知道乘法在那里做什么，我仍然不明白为什么你把变量命名为“乘法器”，而你用它做的是把它加到当前值上。啊！我明白你的意思。有道理。
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;