如何使用 onClick 将文本框值递增/递减一

Question

首先，请帮我在 JavaScript 中解决这个问题。没有 jQuery 或任何插件。我正在尝试对此进行编码以在 Cordova/PhoneGap 中工作。我在玩 Cordova/PhoneGap 的同时自学 JavaScript，所以请保持温柔。

我有一个两边都有按钮的文本框，右边是文本框值加 1（+），左边是文本框减 1（-）。我的目的是让页面/应用程序首次加载在文本框中显示 0 值。一旦有人按下 + 按钮，文本框应该从 0 增加到 1，并随着每次单击 + 增加 1。如果应用程序关闭并重新打开，它应该记住应用程序关闭前文本框中的最后一个数字。

它在浏览器测试中起作用，它导致 PhoneGap 的 iPhone 应用程序不再识别 PhoneGap 重置应用程序的手势等，按下 +/- 按钮太慢地增加/减少文本框，尽管设置 min= 它可能会变为负数“0”。我究竟做错了什么？ （我知道由于沙盒，localStorage 无法在代码 sn-p 中完成，所以如果您希望我放置一个 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()" />