Question

首先，请帮我把它纯粹用JavaScript来表示。没有jQuery或任何插件。我试图将其编码为Cordova / PhoneGap。我在与Cordova / PhoneGap一起玩的同时自学JavaScript，所以请保持温和。

我有一个文本框，左侧有按钮，右边是为文本框值添加1（+上），左边是文本框中的最小值（ - 上面）。我的目的是让页面/应用程序第一次加载在文本框中显示0值。只要有人按下+按钮，文本框就会从0增加到1，每次点击+时再增加1。如果该应用已关闭并重新打开，则应该会在应用关闭之前记住文本框中的最后一个数字。

它适用于浏览器测试，它会导致PhoneGap的iPhone应用程序不再识别重置应用程序的PhoneGap手势等，按+/-按钮会增加/减少文本框太慢，并且它可能会消极尽管设置min =＆＃34; 0＆＃34;。我究竟做错了什么？（我知道localStorage由于沙盒而无法在代码片段中完成，因此，如果您更喜欢我提供一个JSFiddle或其他东西，请告诉我该怎么做。）

＆＃13;

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--);
}

＆＃13;

<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()" />

＆＃13;

Answer 1

因此，您似乎正在改变并将价值持久化到本地存储中。这不会更新页面上的值。我通过修改你的示例来创建一个小函数，该示例可以更新localstorage中的状态，并且它同时更新文本框中的值。

＆＃13;

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;
}

＆＃13;

<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()" />

＆＃13;

如何使用onClick将文本框值增加/减少一个

1 个答案: