Develop Reference

make the input value change without clicking button

I'm trying to make it give me the value that I put in at "summe:" when changing the numbers without actually clicking the calc button how do I do that? I tried with onchange but I cant figure out how to do it
const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
const backend = document.querySelector('.backenduser');
backend.addEventListener('onchange', function() {
var backendanzahl = document.getElementsByClassName("backenduser")[0].value;
var appanzahl = document.getElementsByClassName("appuser")[0].value;
var mytext = "Anzahl der Summe:" + (+backendanzahl * 35 + +appanzahl * 7.5);
summetext.textContent = mytext;
});
App-Benutzer: <input type="number" placeholder="1-100" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value)" class='appuser'></input><br> Backendbenutzer: <input type="number" placeholder="1-15" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value)"
class='backenduser'></input><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>

Use querySelectorAll to get references to both fields. And then forEach to apply event listener to both. Also as any points out the event you are looking for is change.
const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
const backend = document.querySelector('.backenduser');
const updateOnChange = document.querySelectorAll('.update-on-change');
updateOnChange.forEach(input => {
input.addEventListener('change', function() {
var backendanzahl = document.getElementsByClassName("backenduser")[0].value;
var appanzahl = document.getElementsByClassName("appuser")[0].value;
var mytext = "Anzahl der Summe:" + (+backendanzahl * 35 + +appanzahl * 7.5);
summetext.textContent = mytext;
})
});
App-Benutzer: <input type="number" placeholder="1-100" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value)" class='appuser update-on-change'></input><br> Backendbenutzer: <input type="number" placeholder="1-15" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value)"
class='backenduser update-on-change'></input><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>

Add an input handler. Change event only triggers when the element has lost focus.
element.addEventListener('input', function (evt) {
//do your stuff here
});
From MDN

How to limit two inputs with custom maxlength?

How to limit two inputs with custom maxlength ?
I am setting a custom limit $limit = "500"; and trying to limit user words in two inputs. I want to limit first input maxlength and count words in first input, than limit second input maxlength with words left from my custom limit.
I want to set length together max length 500, one can have max 100 and one can have max 400.
and if first input has less words than 100, then add rest of the words left to the second input max length.
like : first input has 95 words in, 5 words left to reach limit.
then change second input maxlentgh to 405,
I create inputs like this :
function maxLength(el) {
if (!('maxLength' in el)) {
var max = el.attributes.maxLength.value;
el.onkeypress = function() {
if (this.value.length >= max) return false;
};
}
}
maxLength(document.getElementById("title"));
function validateLength(el, word_left_field, len) {
document.all[word_left_field].value = len - el.value.length;
if (document.all[word_left_field].value < 1) {
alert("You can add max " + len + " words .");
el.value = el.value.substr(0, len);
document.all[word_left_field].value = 0;
return false;
}
return true;
}
<input type="text" id="title" name="title" maxlength="100" onChange="return validateLength(this, 'word_left', 100);" onKeyUp="return validateLength(this, 'word_left', 100);">
<input type="text" name="word_left" value="100" style="width: 25;" readonly="true" size="3">
<input type="text" id="subject" name="subject" maxlength="400" onChange="return validateLength(this, 'word_left', 400);" onKeyUp="return validateLength(this, 'word_left', 400);">
<input type="text" name="word_left" value="400" style="width: 25;" readonly="true" size="3">
so total of both inputs is 500.
I tried to set html 5 attributes pattern=".{59,60}" but they are same as setting attrbutes min and length.
But my javascript is limiting first input.
I tried several methods but didn't have a chance to make it work, would be to long question I didnt put all on here.

I belive that you need something like this:
var _maxLength = 500;
var _lengthInput = 0;
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var p = document.getElementById("total");
p.innerHTML = _maxLength;
input1.addEventListener("focus", function(e) {
this.maxLength = _maxLength + this.value.length;
_lengthInput = this.value.length;
});
input1.addEventListener("blur", function(e) {
if (_lengthInput == this.value.length)
return;
if (_lengthInput > this.value.length) {
_maxLength += _lengthInput - this.value.length;
} else {
_maxLength -= this.value.length - _lengthInput;
}
total.innerHTML = _maxLength;
});
input2.addEventListener("focus", function(e) {
this.maxLength = _maxLength + this.value.length;
_lengthInput = this.value.length;
});
input2.addEventListener("blur", function(e) {
if (_lengthInput == this.value.length)
return;
if (_lengthInput > this.value.length) {
_maxLength += _lengthInput - this.value.length;
} else {
_maxLength -= this.value.length - _lengthInput;
}
total.innerHTML = _maxLength;
});
Input 1 <input type="text" id="input1">
<br /> Input 2 <input type="text" id="input2">
<br />
<p>Characters remaining: <span id="total"></span> </p>

I hope below code helps you,
$(document).ready(function () {
$("#subject").on("keypress", function () {
var titleLength = $("#title").val().length;
var titleMaxLength = $("#title").attr("maxLength");
var titleWordLeft = titleMaxLength - titleLength
var subjectLength = $("#subject").data("charlength");
var subjectMaxLength = titleWordLeft + subjectLength;
$("#subject").attr("maxLength",subjectMaxLength);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="title" name="title" maxlength="100">
<input type="text" name="word_left" value="100" style="width: 25;" readonly="true" size="3">
<input type="text" id="subject" name="subject" data-charlength="400">
<input type="text" name="word_left" value="400" style="width: 25;" readonly="true" size="3">

onClick works only once

I input the values, and it works ONCE, which is a problem.
I try to change the numbers, and click Enter again, and it does nothing.
The only way it works again is if I use the scroll to up or down the current value.
var fuel = 2.5;
var mpg = 6;
function Hourly() {
var miles = document.getElementById('miles').value;
var brokerPay = document.getElementById('pay').value;
var gallons = miles / 6;
var hours = miles / 55;
var cost = gallons * fuel;
var net = brokerPay - cost
var hourlyPay = net / hours;
var newHeader = document.getElementById('changeMe');
newHeader.innerHTML = hourlyPay;
}
<h1 id="changeMe">Change me Here</h1>
<input type="number" placeholder="miles" id="miles" required/>
<input type="number" placeholder="Broker Pay" id="pay" required/>
<input type="submit" value="Enter" onclick="Hourly()" />

Get array textfield and calculate javascript

forexample, i have this code (results from a php script loop):
<input type="text" name="qtty[]" id="qtty[]" onFocus="startCalc();" onblur="stopCalc();">
<input type="hidden" name="price[]" id="price[]">
<input type="text" name="totalprice[]" id="totalprice[]">
And this for javascript:
function startCalc(){
interval = setInterval("calc()",500);
}
function calc(){
$('input[name="qtty[]"]').each(function(){
qtty = $(this).val();
});
$('input[name="price[]"]').each(function(){
price = $(this).val();
});
total = (qtty * 1) * (price * 1);
$('input[name="totalprice[]"]').val(total);
}
function stopCalc(){
clearInterval(interval);
}
The moment I enter the first input to the array, the program does not show anything. but at the time of the second array of data fed, TotalPrice will change both
Here, Example pict:
http://s7.postimg.org/memsupuh7/Capture1.png
http://s23.postimg.org/6rdfk2rzf/Capture.png

I think you are in the wrong way. This is more preferred variant:
<input type="text" name="qtty">
<input type="hidden" name="price" value="2">
<input type="text" name="totalprice">
<br>
<input type="text" name="qtty">
<input type="hidden" name="price" value="3">
<input type="text" name="totalprice">
and
$('input[name="qtty"]').keyup(function() {
var qtty = $(this).val();
var price = $(this).next().val();
var total = (qtty * 1) * (price * 1);
$(this).nextAll().eq(1).val(total);
});
fiddle

try this
Assign the default value initially
var qtty=0;
var price =0;
var interval ;
function startCalc(){
interval = setInterval(calc,500);
}
function calc(){
$('input[name="qtty[]"]').each(function(){
qtty = $(this).val();
});
$('input[name="price[]"]').each(function(){
price = $(this).val();
});
total = (qtty * 1) * (price * 1);
$('input[name="totalprice[]"]').val(total);
}
function stopCalc(){
clearInterval(interval);
}

Javascript calculation tools is not working perfectly

I've a Javascript calculation tools which sometimes work and sometimes don't work. I don't understand why.
Here is my demo tools : http://propertyjungle.com.au/modern-business/tools_check.php
well, In my "Fixed agent cost when selling" tools there are 5 fields :
1) House Sale Price
2) Rate quoted by agent
3) Other Fees
And in "Result" part there are 2 fields:
1) Agent Fees:
2) Reducing the rate the agent is charging by 0.1% will save you
It's showing the result automatically. I mean on keypress.
So When I increment both "House Sales Price" and "Rate Quoted..." then both result fields is showing me "NaN". But it's should be show the value.. e.g:
House Sales Price = 10000
Rated Quoted = 0.3%
Other Fees = 0 (empty)
Result:
Agent Fees = 30 (House Sales Prices * Rated Quoted )
Reducing.... = 10 (0.1% of House sales Price)
After that If I increment "Other Fees" it's then showing the result but result is wrong. It's should be e.g :
Correct Result:
Agent Fees = 10030 (House Sales Prices * Rated Quoted + Other Fees[increment by 10,000] )
Reducing.... = 10 (0.1% of House sales Price)
Wrong Result :
Agent Fees = 10030 (House Sales Prices * Rated Quoted + Other Fees[increment by 10,000] )
Reducing.... = 10010.00
Here is my complete code:
Javascript:
function incrementValue()
{
var value = parseInt(document.getElementById('pvalue1').value, 10);
value = isNaN(value) ? 0 : value;
value +=10000
document.getElementById('pvalue1').value = value;
}
function decrementValue()
{
var value = parseInt(document.getElementById('pvalue1').value, 10);
value = isNaN(value) ? 0 : value;
value -=10000
document.getElementById('pvalue1').value = value;
}
function incrementValueO()
{
var value = parseInt(document.getElementById('otherFees').value, 10);
value = isNaN(value) ? 0 : value;
value +=10000
document.getElementById('otherFees').value = value;
$('#pvalue1').trigger("change");
}
function decrementValueO()
{
var value = parseInt(document.getElementById('otherFees').value, 10);
value = isNaN(value) ? 0 : value;
value -=10000
document.getElementById('otherFees').value = value;
}
function toggleIncrement()
{
var value = parseFloat(document.getElementById('pvalue2').value, 10);
value = isNaN(value) ? 0 : value;
value +=0.1
value = parseFloat(value).toFixed(2)
document.getElementById('pvalue2').value = value;
$('#pvalue1').trigger("change");
}
function toggleDecrement()
{
var value = parseFloat(document.getElementById('pvalue2').value, 10);
value = isNaN(value) ? 0 : value;
value -=0.1
value = parseFloat(value).toFixed(2)
document.getElementById('pvalue2').value = value;
$('#pvalue1').trigger("change");
}
jQuery(document).ready(function(){
$('#pvalue1').change(function(){
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
console.debug( parseFloat(document.getElementById('otherFees').value));
var otherFees = parseFloat(document.getElementById('otherFees').value);
var totalOtherFees = agentfee + otherFees;
$('#pvalue3').val(totalOtherFees);
var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
$('#pvalue4').val(newvalue);
var takevalue1 = parseFloat($('#pvalue3').val(), 10);
var takevalue2 = parseFloat($('#pvalue4').val(), 10);
var finalvalue = takevalue1 - takevalue2;
var finalvalue = parseFloat(finalvalue).toFixed(2)
$('#pvalue5').val(finalvalue);
});
$('#pvalue2').change(function(){
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
$('#pvalue3').val(agentfee);
var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
$('#pvalue4').val(newvalue);
var takevalue1 = parseFloat($('#pvalue3').val(), 10);
var takevalue2 = parseFloat($('#pvalue4').val(), 10);
var finalvalue = takevalue1 - takevalue2;
$('#pvalue5').val(finalvalue);
});
$('#otherFees').change(function(){
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
console.debug( parseFloat(document.getElementById('otherFees').value));
var otherFees = parseFloat(document.getElementById('otherFees').value);
var totalOtherFees = agentfee + otherFees;
$('#pvalue3').val(totalOtherFees);
var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
$('#pvalue4').val(newvalue);
var takevalue1 = parseFloat($('#pvalue3').val(), 10);
var takevalue2 = parseFloat($('#pvalue4').val(), 10);
var finalvalue = takevalue1 - takevalue2;
var finalvalue = parseFloat(finalvalue).toFixed(2)
$('#pvalue5').val(finalvalue);
});
});
Html Code:
<table border="0" cellpadding="5">
<tr>
<td>House Sale Price:</td>
<td>$</td>
<td><input name="pvalue1" class="form-control" onkeypress="validate(event)" placeholder=" Enter Sale Price" type="number" value="<?=$pvalue1?>" id="pvalue1" size="20" required ></td>
<td><input type="button" onClick="incrementValue()" value="+" /><input type="button" onClick="decrementValue()" value="-" /> </td>
</tr>
<tr>
<td>Rate quoted by agent:</td>
<td>%</td>
<td><input name="pvalue2" class="form-control" onkeypress="validate(event)" placeholder=" Percentage" type="number" value="<?=$pvalue2?>" id="pvalue2" size="20" required ></td>
<td><input type="button" onClick="toggleIncrement()" value="+" /><input type="button" onClick="toggleDecrement()" value="-" /></td>
</tr>
<tr>
<td>Other Fees</td>
<td>$</td>
<td><input name="otherFees" class="form-control" onkeypress="validate(event)" placeholder=" Enter Sale Price" type="number" value="<?=$pvalue1?>" id="otherFees" size="20" required ></td>
<td><input type="button" onClick="incrementValueO()" value="+" /><input type="button" onClick="decrementValueO()" value="-" /> </td>
</tr>
</table>
<input name="doRegister" type="submit" id="doRegister" value="Calculate" style="color:white;font-size:20px;" class="btn btn-primary">
<br><br>
<h2>Results</h2>
<table>
<tr>
<td>Agent Fees:</td>
<td>$</td>
<td><input name="pvalue3" onkeypress="validate(event)" class="form-control" placeholder="" type="number" value="<?=$pvalue3?>" id="pvalue3" size="10" class="resultfield" ></td></tr>
<tr>
<td></td>
<td><span id='show-me' class="form-control" style='display:none'><input name="pvalue4" placeholder="" type="number" value="<?=$pvalue4?>" id="pvalue4" size="10" class="resultfield" ></span></td></tr>
<tr>
<td>Reducing the rate the agent is charging by 0.1% will save you: </td>
<td>$</td>
<td><input name="pvalue5" onkeypress="validate(event)" class="form-control" placeholder="" type="number" value="<?=$pvalue5?>" id="pvalue5" size="10" class="resultfield" ></td>
</tr>
</table>
Many Thanks to you.

var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
console.log($('#pvalue1').val()); //3
console.log( $('#pvalue2').val()); // ""
parseInt("") is NaN
You deal with isNaN in the code above, implement the same logic here.