如何使用 onClick 逐一 increment/decrement 文本框值

Question

首先请大家帮我算一下JavaScript。没有 jQuery 或任何插件。我正在尝试对此进行编码以在 Cordova/PhoneGap 中工作。我一边自学 JavaScript 一边玩 Cordova/PhoneGap 所以请温柔点。

我有一个文本框，两边都有按钮，右边用于将文本框值加 1（+ 在其上），左边用于从文本框（- 在其上）减 1。我的目的是让 page/app 加载第一次在文本框中显示 0 值。只要有人按下 + 按钮，文本框就应该从 0 增加到 1，并且每次单击 + 都会增加 1。如果应用程序关闭并重新打开，它应该记住应用程序关闭前文本框中的最后一个数字。

它在浏览器测试中有效，它导致 PhoneGap 的 iPhone 应用程序不再识别 PhoneGap 重置应用程序等手势，按下文本框的 +/- 按钮 increments/decrements 太慢，并且尽管设置了 min="0"，它仍可能变为负值。我究竟做错了什么？（我知道由于沙盒，localStorage 无法在代码片段中完成，所以如果您希望我提供 JSFiddle 或其他东西，请告诉我该怎么做。）

window.onload = function(){
 var CapsNum = localStorage.getItem("CapsNum");

  if(CapsNum == null) {
   CapsNum = "0";
  } else {
   document.getElementById("caps").value = CapsNum;
}}
window.onbeforeunload = function(){
 localStorage.setItem("CapsNum", document.getElementById("caps").value);
}
function PlusCaps(){
 localStorage.setItem("CapsNum",document.getElementById("caps").value++);
}

function MinusCaps(){
 localStorage.setItem("CapsNum",document.getElementById("caps").value--);
}

<input type="button" id="plus" class="button" value="+" style="margin-left:10px" onclick="MinusCaps()" />
<input type="tel" id="caps" maxlength="3" size="3" min="0" max="999" pattern="[0-9]" value="0" />
<input type="button" id="minus" class="button" value="-" style="margin-right:10px" onclick="PlusCaps()" />

Answer 1

所以看起来您正在更改值并将其保存到本地存储中。这不会更新页面上的值。我通过修改您的示例创建了一个小函数，它可以更新本地存储中的状态并同时更新文本框中的值。

window.onload = function() {
  //var CapsNum = localStorage.getItem("CapsNum");

  if (CapsNum == null) {
    CapsNum = "0";
  } else {
    document.getElementById("caps").value = CapsNum;
  }
}
window.onbeforeunload = function() {
  localStorage.setItem("CapsNum", document.getElementById("caps").value);
}

function PlusCaps() {
 var nextValue = parseInt(document.getElementById("caps").value) + 1;
  setNextValue(nextValue);
}

function MinusCaps() {
 var nextValue = parseInt(document.getElementById("caps").value) - 1;
  setNextValue(nextValue);
}

function setNextValue(nextValue) {
  //localStorage.setItem("CapsNum", nextValue);
  document.getElementById("caps").value = nextValue;
}

<input type="button" id="plus" class="button" value="+" style="margin-left:10px" onclick="PlusCaps()" />
<input type="tel" id="caps" maxlength="3" size="3" min="0" max="999" pattern="[0-9]" value="0" />
<input type="button" id="minus" class="button" value="-" style="margin-right:10px" onclick="MinusCaps()" />

如何使用 onClick 逐一 increment/decrement 文本框值

How to increment/decrement textbox value by one with onClick

javascript

android

ios

cordova

numberpicker