I'm looking for help with a JavaScript solution without using jQuery or any plugins, specifically for Cordova/PhoneGap. I am new to JavaScript and learning as I go, so please bear with me.
My goal is to create a functionality where there is a textbox with buttons on each side - one for adding 1 to the textbox value (+) and the other for subtracting 1 (-). When the page/app loads for the first time, I want the textbox to show a value of 0. Upon clicking the + button, the textbox should increment by 1 and continue to increase with each click. Additionally, the app should remember the last input value even after it is closed and reopened.
I have encountered some issues during testing, such as causing disruptions in PhoneGap's iPhone gestures, slow increments/decrements, and the possibility of negative values despite setting a minimum of 0. The code snippet includes localStorage which might not work due to sandboxing, so I may need to use JSFiddle instead.
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()" />