Develop Reference

min max input type value only works when clicking the increment and decrement arrows [duplicate]

This question already has answers here:
Restrict input type="number" to its min or max if it is out of range
(3 answers)
Restrict user to put value in range in html input (type = number)
(4 answers)
HTML number input min and max not working properly
(20 answers)
Closed 4 months ago.
I'm trying this min max input type number but it doesn't work when the user manually type.
So I just disabling the button I have.
Is there's another way to do it without disabling the button like I did?
const ck = document.getElementById('btn');
var inp = document.getElementById('inp');
ck.addEventListener('click', function (){
alert(inp.value);
})
inp.addEventListener('keyup', function (){
var att = this.getAttribute("max");
var vl = this.value;
if (vl > att){
ck.disabled = true;
}else{
ck.disabled = false;
}
})
<input type="number" id="inp" min="1" max="5" value="1"/>
<button id="btn">Button</button>

Have input element "follow along" as value is updated programmatically [duplicate]

This question already has answers here:
Input value is a string instead of a number
(4 answers)
Closed 3 months ago.
If you run the code snippet below and type (anything) into the input, the input will "follow along" with your text input, and not just show the first few characters indefinitely.
I'm wondering if this is possible to achieve if the input value is changed programmatically, in this example, the "Update Input" button.
const updateInput = () => {
const input1 = document.getElementById('input1');
input1.value += (Math.random()*1000).toString();
}
<input id="input1" style="width:50px" />
<button onclick="updateInput()">Update Input</button>
edit: This question has nothing to do with Input value is a string instead of a number

You need to focus it and then set selection range
const updateInput = () => {
const input1 = document.getElementById('input1');
input1.value += Math.random()*1000;
input1.focus()
input1.setSelectionRange(input1.value.length, input1.value.length);
}
<input id="input1" style="width:50px" />
<button onclick="updateInput()">Update Input</button>

How to show remaining characters if the textarea is prefilled?

If I have prefilled textarea, the 250 characters don't actually count the default words already in there. It only starts counting if you start typing something in it.
Also, how do I change the text color to yellow on "100 characters remaining" and change to red on "0 characters remaining"
Can someone help please?
function handle(){
let element = document.getElementById('input')
let value = element.value
let maxLength = element.maxLength
document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`
}
<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>

the 250 characters don't actually count the default words already in there. It only starts counting if you start typing something in it.
Just run your function once on page load:
function handle() {
let element = document.getElementById('input')
let value = element.value
let maxLength = element.maxLength
document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`
}
handle();
<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>
how do I change the text color to yellow on "100 characters remaining" and change to red on "0 characters remaining"
Do an if on each keyup:
function handle() {
let element = document.getElementById('input');
let value = element.value;
let maxLength = element.maxLength;
document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`;
if (maxLength - Number(value.length) == 0) {
document.getElementById('remaining').style.color = "red";
} else if (maxLength - Number(value.length) <= 100) {
document.getElementById('remaining').style.color = "yellow";
}
}
handle();
<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>

Get value from input box with js [duplicate]

This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 5 years ago.
I have no idea how to get value from input box. Right now when I click BET button it just subtracts 100, I want to achieve so when I enter the value in the text box and hit bet it'll subtract the value which I've entered from the balance. Here is my code:
HTML:
<div>
<input type="text" value=0 name="betAmount">
<button class="betBTN">BET</button>
</div>
JS:
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('.betBTN').addEventListener('click', function() {
var toAdd = document.querySelector('div').textContent - 100;
document.querySelector('div').innerHTML = "";
document.querySelector('div').insertAdjacentHTML('afterbegin', toAdd);
});
});
Any suggestions?

Replace your 100 with
document.querySelector("input").value;
This line will get the value of input element
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('.betBTN').addEventListener('click', function() {
var toAdd = document.querySelector('div').textContent - document.querySelector("input").value;
document.querySelector('div').innerHTML = "";
document.querySelector('div').insertAdjacentHTML('afterbegin', toAdd);
});
});
Balance: <div>1000</div>
<input type="text" value=0 name="betAmount">
<button class="betBTN">BET</button>

If you’re talking about the entered value, then the following would do the job:
document.querySelector('input[name="betAmount"]').value;
All input elements, whether they are HTML input or textarea or select etc have a value property which is the actual value of the user data.

Text area white spaces in form

I have one form in with textarea:
<textarea wrap="physical" cols="28" rows="5" name="<portlet:namespace />tsSummary" onKeyDown="CountRight(this.form.<portlet:namespace />tsSummary,this.form.right,200);getElementById('char_count_summary').innerHTML = this.value.length" onKeyUp="CountRight(this.form.<portlet:namespace />tsSummary,this.form.right,200);getElementById('char_count_summary').innerHTML = this.value.length" onfocus="getElementById('char_count_summary').innerHTML = this.value.length">
<c:choose><c:when test="<%=Validator.isNotNull(dMang)%>"><%=dMang.getTsSummary()%></c:when><c:otherwise><%=""%></c:otherwise></c:choose>
</textarea>
<b><span id=char_count_summary></span></b>
<input readonly type="hidden" name="right" size=3 maxlength=3>
Javascript for limiting count to 200:
function CountRight(field, count, max) {
// if the length of the string in the input field is greater than the max value, trim it
if (field.value.length > max)
field.value = field.value.substring(0, max);
else
// calculate the remaining characters
count.value = max - field.value.length;
}
But, I get extra leading white spaces whenever i open the form and it takes extra characters showing count more than 200.
How can I remove extra blank spaces before content?

Remove the spaces in the source from between <textarea …> and <c:choose>

function trim(value) {
value = value.replace(/^\s+/,'');
value = value.replace(/\s+$/,'');
return value;
}
this removes any whitespace on the start or end of a string. You could do something like
field.value = trim(field.value);