Develop Reference

prevent a number higher than the max be typed into a text box

I have an input with type number. I have a min value of 0 and a max value produced by a variable (eg 5). Using the up/down arrow I can go between 0 and 5 only. how can I prevent anyone from typing in 6 or above?
I have set up as follows
<input type='number' id='quantity' name='quantity' min='0' max='$the_quantity_required'>
I have tried with readonly and disabled with the obvious result of preventing interaction with the text box. I don't know javascript but was wondering if there was anything in js that would do this?
Any help would be appreciated

Try this
<script>
document.addEventListener("DOMContentLoaded", () => {
var el = document.querySelector('#quantity');
el.addEventListener('input', function(){
let val = this.value;
let max = parseFloat(this.getAttribute('max'));
val = parseFloat(val);
if(isNaN(val)) this.value = '';
if(val > max) this.value = max;
});
});
</script>

How to retain value after page refresh?

I managed to get the number go up after pressing each button, but I need the value to stay after refreshing the page. I understand I could use localStorage, but I do not understand how it works.
<form>
<input type="text" id="number" value="0" />
<input type="button" onclick="incrementValue10()" value="$10" />
<input type="button" onclick="incrementValue20()" value="$20" />
<input type="button" onclick="incrementValue50()" value="$50" />
</form>
function incrementValue10() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value += 10;
document.getElementById('number').value = value;
}
function incrementValue20() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value += 20;
document.getElementById('number').value = value;
}
function incrementValue50() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value += 50;
document.getElementById('number').value = value;
}

To use localStorage you simply need to call setItem() to save a value and getItem to retrieve it.
It's also worth noting that you should not be using onX attributes. They are bad practice. Use unobtrusive event handlers instead. Also, you can easily DRY the code up by attaching a single function to all elements and varying its action by a data attribute on each one. Something like this:
let output = document.querySelector('#number');
// save the value on click of the button
document.querySelectorAll('.inc').forEach((el) => {
el.addEventListener('click', function() {
var newValue = parseFloat(output.value) + parseFloat(this.dataset.inc);
output.value = newValue;
localStorage.setItem('number', newValue);
});
});
// retrieve the value when the page loads
var oldValue = localStorage.getItem('number') || 0;
output.value = oldValue;
<form>
<input type="text" id="number" value="0" />
<input type="button" class="inc" data-inc="10" value="$10" />
<input type="button" class="inc" data-inc="20" value="$20" />
<input type="button" class="inc" data-inc="50" value="$50" />
</form>
Note that SO snippets block access to localStorage, so here's a fully working jsFiddle

You can use localstorage for this:
if(localStorage.getItem('number') != ""){
document.getElementById('number').value = localStorage.getItem('number');
}
function incrementValue10()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value+=10;
document.getElementById('number').value = value;
localStorage.setItem('number', document.getElementById('number').value)
}
function incrementValue20()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value+=20;
document.getElementById('number').value = value;
localStorage.setItem('number', document.getElementById('number').value)
}
function incrementValue50()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value+=50;
document.getElementById('number').value = value;
localStorage.setItem('number', document.getElementById('number').value)
}

As per the code, you are just storing the values in memory(heap). When page is re-loaded browser just allocates new memory and you can't retain the previous values. So store the values in some persistence like client side(localstorage, sssionstorage and Index DB) if it is entirely related to the particular client's UI state, servr side Databases like SQL, NoSQL, RDBMS.
Refer this link for basic understanding of client side storage.
https://www.w3schools.com/html/html5_webstorage.asp

I cant change value of Input

I want to create Javascript simple calculator, I want to change <input> tag's value on click, I used this
document.getElementById('input').value = "1"
But it types once 1 so I can't type 11 or 111. What is problem? Can you help me?

I don't know if that's the correct answer as OP's code wasn't provided...
var el = document.getElementById('input');
el.value = 1;
var button = document.getElementById('button')
button.onclick = function() {
el.value = parseInt(el.value) + 1;
}
<input id="input" type="text" name="name" value="">
<button id="button">Add 1!</button>
On button click, the function will retrieve the value from the input box, convert it to integer and then add 1.
If that's not the answer you were looking for, let me know.
EDIT: Just to clarify.
I have used parseInt() to convert to integer. This way if el.value = 1
The result will be 2. However if I don't use parseInt() I would get a concatenation instead of an operation and el.value + 1 would do 11, el.value being a string.

First you have to get the value of that field as
var val = document.getElementById('input').value;
Then Add a value and show in it as
document.getElementById('input').value = val + 1;
Here is a complete Running code:
function function_name (argument) {
var val = document.getElementById('input').value;
document.getElementById('input').value = val + 1;
}
<input id="input" type="text" name="name" value="">
<button id="button" onclick="function_name()">Press 1!</button>

How to manipulate value based on textbox value?

If I enter negative value in textbox, while in onclick the value will be reduced by some other value.
If I enter positive value in textbox, while in onclick the value will be add by some other values.

Make a simple comparison.
function go() {
var value = parseFloat(document.getElementById("value").value),
positiveValue = 5,
negativeValue = -1;
value += value < 0 ? negativeValue : positiveValue;
document.getElementById("value").value = value
}
<input id="value" onchange="go()">

Change the value of the textbox comparing it on button click.
HTML :
<input type="text" id="inputTextBox" />
<input type="button" id="changeButton" value="update value"/>
javaScript :
var paddingValue = 10;
document.getElementById("changeButton").onclick = function(){
var inputTextBox = document.getElementById("inputTextBox");
if(inputTextBox.value < 0){
inputTextBox.value = parseInt(inputTextBox.value) - paddingValue;
}else{
inputTextBox.value = parseInt(inputTextBox.value) + paddingValue;
}
};
jsFiddle demo

Update a Element's Value On An Interval

I just want a temperature counter, to show in the div "display". The default temp is 7.2, and whenever I submit another temp, it slowly decrements (0,2 per 5 minutes) to that preferred temp. Can you help me out? I am a beginner so please bear with me.
What is wrong with this code?
JavaScript:
var temp = 7.2;
var loop = setInterval(cooler, 300000);
function cooler()
{
document.getElementById("display").innerHTML = temp-0,2;
setInterval(loop);
}
function abortTimer()
{
clearInterval(loop);
}
HTML:
<body>
Current temp <div id="display"> </div> <br>
<form>
Set temp: <input type="text" id="setTemp">
<input type="submit" value="Submit" onClick=cooler();>
</form>
</body>

There was a few things wrong with the code.
You decremented the value of temp but never update the variable. (temp)
By using setInterval you only need invoke it once. Once you clearInterval however you will need to call it again.
I changed the code a bit, updating variable names to something more appropriate. The code could definitely use some more love, but I kept my changes simple so you could follow along.
JavaScript:
var currentTemp = 7.2;
var loop = setInterval(cooler,1000);
function cooler()
{
currentTemp = currentTemp - 0.2;
document.getElementById("display").innerHTML = currentTemp;
}
function setTemp()
{
var input = document.getElementById('setTemp');
currentTemp = parseInt(input.value);
input.value = '';
}
function abortTimer()
{
clearInterval(loop);
}
//Wire click event to the submit button
document.getElementById('submit').addEventListener('click', function()
{
setTemp();
});
HTML:
<body>
Current temp <div id="display">
</div>
<br>
<form>
Set temp: <input type="text" id="setTemp">
<input id="submit" type="button" value="Submit">
</form>
</body>
See the link below for a sample of the code running at 1 second updates.
http://jsbin.com/zibuzuza/1/edit

startChange = function(){
var v,nt,diff,timelapse,decrease,decreaseit,loop;
v = d.value;
nt = t.value;
diff = v-nt;
timelapse = 500; //set to whatever you like
decrease = .2;
decreaseit = function(){
var v = d.value;
if(v>=(nt+decrease)){
loop = setTimeout(function(){
d.value = (v-decrease).toFixed(1);
decreaseit();
},timelapse)
} else clearInterval(loop);
}
decreaseit();
}
s.onclick = startChange;
Using setTimeout to call its parent function if conditions are met, else clearInterval
Using . (numbers with decimals), you're going to run into the whole parseFloat problem. It's hard to work with. Not a stunning example, but the basic framework : http://jsfiddle.net/wYn6J/1/