[英]How to create a counter with a plus and minus button which passes a parameter so that I don't have two use two separate functions?
I have created a counter with a plus and minus button. 我创建了一个带加号和减号按钮的计数器。 The counter works fine but I would like to simplify my code by passing a parameter to my function that performs both the plus and minus calculations depending on which button is clicked. 计数器工作正常,但我想通过将参数传递给我的函数来简化我的代码,该函数根据单击的按钮执行加号和减号计算。 At the moment I have two separate functions doing this but I would like to pass the 'result' variable as this is the part that tells my script whether I want to add 1 or minus 1, however I am unsure on how to do this? 目前我有两个单独的函数执行此操作,但我想传递'result'变量,因为这是告诉我的脚本是否要添加1或减1的部分,但是我不确定如何执行此操作?
I have attached my JavaScript below to show what I have so far. 我已经在下面附上了我的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;
}
You can make a curried function to "bake" your delta value into the click handlers: 您可以使用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);
You can use the same function to modify the counter element and then just pass a negative or positive integer as the parameter to the function, like so: 您可以使用相同的函数来修改计数器元素,然后将负整数或正整数作为参数传递给函数,如下所示:
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;
}
You could use curried
functions. 你可以使用curried
函数。
The following should make your code simple and as required: 以下内容应使您的代码简单并符合要求:
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 functions are basically, functions that return another function. Curried函数基本上是返回另一个函数的函数。 The inner functions have access to the variables defined in the wrapping function. 内部函数可以访问包装函数中定义的变量。 read more about them here: https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983 在这里阅读更多关于它们的信息: https : //medium.com/javascript-scene/curry-and-function-composition-2c208d774983
Possible solution with onclick event: 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>
You can use the first and only parameter of the click handler, to get the ID of the element. 您可以使用单击处理程序的第一个也是唯一的参数来获取元素的ID。 Then use a ternary command to decide, if the result should be incremented or decremented. 然后使用三元命令来决定结果是递增还是递减。
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;
You could also rewrite the method to use an if
instead of the result
variable. 您还可以重写方法以使用if
而不是result
变量。
Here's what I would consider an optimized version: 以下是我认为的优化版本:
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;
I have modified your code to a function, you just need to use that function on the event you want. 我已将代码修改为函数,您只需要在所需的事件上使用该函数。
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;
}
If you need any help please let me know. 如果您需要任何帮助,请告诉我。
Eg : <button type='button' onClick='return CounterUpdate("+")'>+</Button>
例如: <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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.