[英]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?
我创建了一个带加号和减号按钮的计数器。 计数器工作正常,但我想通过将参数传递给我的函数来简化我的代码,该函数根据单击的按钮执行加号和减号计算。 目前我有两个单独的函数执行此操作,但我想传递'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函数将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);
您可以使用相同的函数来修改计数器元素,然后将负整数或正整数作为参数传递给函数,如下所示:
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;
}
你可以使用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
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>
您可以使用单击处理程序的第一个也是唯一的参数来获取元素的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;
我已将代码修改为函数,您只需要在所需的事件上使用该函数。
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;
}
如果您需要任何帮助,请告诉我。
例如: <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.