Fatal编程技术网
  • javascript/
  • Javascript 两个按钮一个功能（递增、递减）

Javascript 两个按钮一个功能（递增、递减）

javascript html

Javascript 两个按钮一个功能（递增、递减）,javascript,html,Javascript,Html,我希望能够增加和减少一个值（5），我想用一个函数来说明这一点（我知道如何使用两个函数）。 不幸的是，我无法完成这项工作，也无法找出问题所在 这是我的代码： HTML: 也在 如果可能的话，我更喜欢一个普通的JS解决方案，但欢迎任何建议：） 谢谢 您可以将操作作为参数进行移交 <form> <button type="button" value="minus" onclick="updateAmount('minus');"> - </button

我希望能够增加和减少一个值（5），我想用一个函数来说明这一点（我知道如何使用两个函数）。 不幸的是，我无法完成这项工作，也无法找出问题所在

这是我的代码：
HTML:

也在

如果可能的话，我更喜欢一个普通的JS解决方案，但欢迎任何建议：）

谢谢

您可以将操作作为参数进行移交

<form>
  <button type="button" value="minus" onclick="updateAmount('minus');">
    -  
  </button>
  <span id="number">
    5
  </span>
  <button type="button" value="plus" onclick="updateAmount('plus');">
    +  
  </button>
</form>
您可以将该操作作为参数移交

<form>
  <button type="button" value="minus" onclick="updateAmount('minus');">
    -  
  </button>
  <span id="number">
    5
  </span>
  <button type="button" value="plus" onclick="updateAmount('plus');">
    +  
  </button>
</form>
很接近，因为有多个元素使用
document.querySelectorAll（）
和有效选择器来获取引用和绑定事件处理程序

当您使用
元素时，它没有
值
属性，需要使用
文本内容
属性

var btns=document.querySelectorAll（'button'）；
btns.forEach（功能（btn）{
btn.addEventListener（'click'，updateAmount'）；
});
函数updateAmount（）{
var num=parseInt（document.getElementById（'number'）.textContent.trim（），10）；
this.value==“减”？num--：num++；
document.getElementById（'number'）。textContent=num；
}
-
5.

+
您很接近，因为您有多个元素使用带有有效选择器的
document.querySelectorAll（）
引用并绑定事件处理程序

当您使用
元素时，它没有
值
属性，需要使用
文本内容
属性

var btns=document.querySelectorAll（'button'）；
btns.forEach（功能（btn）{
btn.addEventListener（'click'，updateAmount'）；
});
函数updateAmount（）{
var num=parseInt（document.getElementById（'number'）.textContent.trim（），10）；
this.value==“减”？num--：num++；
document.getElementById（'number'）。textContent=num；
}
-
5.

+
对方法的最小更改是将参数传递给函数：

函数更新计数（值）{
console.log（“更新方式：”+值）；
}

-  
5.
+
对方法的最小更改是将参数传递给函数：

函数更新计数（值）{
console.log（“更新方式：”+值）；
}

-  
5.
+
只需像这样使用
updateAmount（this）

函数updateAmount（即）{
var number=document.getElementById（'number'）；
var num=parseInt（number.innerHTML）；
num=（that.value==“减”）？--num:++num；
number.innerHTML=num；
}

-  
5.
+
只需像这样使用
updateAmount（this）

函数updateAmount（即）{
var number=document.getElementById（'number'）；
var num=parseInt（number.innerHTML）；
num=（that.value==“减”）？--num:++num；
number.innerHTML=num；
}

-  
5.
+
你可以试试这个

   <html>
       <form>
          <button type="button" value="minus" onclick="updateAmount(this.value);">
          -  
      </button>
      <span id="number">
       5
     </span>
    <button type="button" value="plus" onclick="updateAmount(this.value);">
     +  
   </button>    
  </form>
  <script>
    function updateAmount(value){ 
     var num = parseInt(document.getElementById('number').innerHTML);
    value=='plus'?num++:num--;
    document.getElementById('number').innerHTML = num;
    }
</script>
</html>


-  
5.
+  
函数updateAmount（值）{
var num=parseInt（document.getElementById（'number'）.innerHTML）；
值=='plus'？num++：num--；
document.getElementById（'number'）。innerHTML=num；
}
你可以试试这个

   <html>
       <form>
          <button type="button" value="minus" onclick="updateAmount(this.value);">
          -  
      </button>
      <span id="number">
       5
     </span>
    <button type="button" value="plus" onclick="updateAmount(this.value);">
     +  
   </button>    
  </form>
  <script>
    function updateAmount(value){ 
     var num = parseInt(document.getElementById('number').innerHTML);
    value=='plus'?num++:num--;
    document.getElementById('number').innerHTML = num;
    }
</script>
</html>


-  
5.
+  
函数updateAmount（值）{
var num=parseInt（document.getElementById（'number'）.innerHTML）；
值=='plus'？num++：num--；
document.getElementById（'number'）。innerHTML=num；
}

var minusBtn=document.querySelector（“#减”）；
var plusBtn=document.querySelector（“#plus”）；
minusBtn.addEventListener（'click'，updateAmount（'减号'）；
plusBtn.addEventListener（'click'，updateAmount（'plus'）；
函数updateAmount（操作）{
返回函数（）{
var numberrelem=document.getElementById（'number'）；
变量编号=numberRelem.innerText；
number=parseInt（number，10）；
如果（操作=='减'）{
数字--；
}else if（action=='plus'）{
数字++；
}否则{
抛出新错误（“无效运算符”）；
}
numberrelem.innerText=编号；
};
}
-  
5.
+
这是curry函数的一个很好的例子，您可以将updateAmount转换为接受操作作为参数的一部分； var plusBtn=document.querySelector（“#plus”）； minusBtn.addEventListener（'click'，updateAmount（'减号'）； plusBtn.addEventListener（'click'，updateAmount（'plus'）； 函数updateAmount（操作）{ 返回函数（）{ var numberrelem=document.getElementById（'number'）； 变量编号=numberRelem.innerText； number=parseInt（number，10）； 如果（操作=='减'）{ 数字--； }else if（action=='plus'）{ 数字++； }否则{ 抛出新错误（“无效运算符”）； } numberrelem.innerText=编号； }; } - 5. +
这是curry函数的一个很好的例子，您可以将updateAmount转换为接受操作作为参数的一部分

您的代码只有两个小缺陷，其余的就完美了。 首先，变量num的计算结果为NaN
其次，您应该使用textContent而不是value。 我正在分享评估num的正确方法，然后它就会起作用

var el =document.getElementById('number')
var num = parseInt(el.textContent);
同样，在更新时

document.getElementById('number').textContent = num
希望对您有所帮助。

您的代码只有两个小缺陷，其余的则是完美的。 首先，变量num的计算结果为NaN
其次，您应该使用textContent而不是value。 我正在分享评估num的正确方法，然后它就会起作用

var el =document.getElementById('number')
var num = parseInt(el.textContent);
同样，在更新时

document.getElementById('number').textContent = num
希望有帮助