We Keep Coding

trying to manage the value of 2 inputs

I'm not really good for speaking english, but this problem could kill me.. I'm on since 3 days..
I have 2 inputs, each input can be 1 to 100.
But i need that the addition of the both is never below 100.
Exemple : 40 & 60, 30 & 70, ...
I tried to change the second input with a focusout (rly that i need), to add to the second input the value that i needed.
Exemple :
Input 1 : value 40
Input 2 : Value 20 (In this case i need that this input change to 60 whenever i focusout it)
Sorry for this poor english, but instead of reading a solution this time i need to post (Never posted before because i always find what i needed ).
This is my code :
if($("#coemp_pret1").val() == "1"){
$(this).val(function(index, value) {
var tempValue = $(this).val($(this).val() + $("#QuotDecAdh_s3p1").val());
if( tempValue < "100" ){
return value
.replace(/\d{1,2}(?!\d)|100/, "");
$(this).val(100 - $("#QuotDecAdh_s3p1").val());
}
});
}
Thanks i hope you can help me, byebye !

I have added a new event, to handle first input changes. So, everytime you change the value from it, the value from the second will reset to ''.
Also added .on('blur') event for the second field, so you can check if the sum of both is below 100. If it is, then the difference from 100 and the sum will be extracted to be displayed as the second input value.
Code below:
$(function() {
$('#inp1').on('change', function() {
$('#inp2').val('');
});
$('#inp2').on('blur', function() {
var val1 = $('#inp1').val();
if (val1 > 0) {
var val2 = $(this).val();
var sum = (val1 + val2);
if (sum < 100) {
var diff = (100 - sum);
$(this).val(diff);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Value 1</span>
<input id="inp1" type="text" />
<br />
<br />
<span>Value 2</span>
<input id="inp2" type="text" />

You can use 'blur' event on the second input & keyup on first input.
blur will start calculation as soon as focus is removed from the second input.
On updating first input the second field will set to empty
$("#coemp_pret1").on("keyup", function() {
$("#QuotDecAdh_s3p1").val("");
});
$("#QuotDecAdh_s3p1").on("blur", function() {
if ("" !== $("#coemp_pret1").val() && ($(this).val(), 100 > $(this).val() + $("#coemp_pret1").val())) {
var a = 100 - $("#coemp_pret1").val();
$(this).val(a);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="coemp_pret1">
<input type="text" id="QuotDecAdh_s3p1">

update number in javascript on input change

I have a number in javascript that I need to update when an input is changed.
I want 'amount: 20000' to reflect what has been entered into the #customValue input multiplied by 100.
So if a user entered '30' in the input, 'amount: 20000' would be updated to 'amount: 3000'
Any ideas how I would accomplish this would be greatly appreciated! : )
<input id="customValue" value="200" />
<button id="customButton">Purchase</button>
<script>
document.getElementById('customButton').addEventListener('click', function(e) {
handler.open({
amount: 20000
});
});
</script>

Your handler variable is undefined. In the example below, I'm adding an EventListener to the Purchase button. When a user clicks on this button, it will take the value of the input field and multiply it by 100.
You should validate whether the entered value is a valid integer.
document.getElementById('customButton').addEventListener('click', function(e) {
var customValue = document.getElementById('customValue').value;
// validate to check if customValue is a valid integer
console.log(parseInt(customValue) * 100); // log new amount to console
});
<input id="customValue" value="200" />
<button id="customButton">Purchase</button>

document.getElementById('customButton').addEventListener('click', function(e) {
var value = document.getElementById("customValue").value * 100; // multiply the customValue by a 100 and assign it to the variable value
// use value whereever you like:
alert(value);
});
<input id="customValue" value="200" />
<button id="customButton">Purchase</button>

Calculate discount using jquery

I am calculating Discount using jquery. But I have a problem calculating the correct discount. My calculation gives me wrong result.
Here is my code
$(document).on("change keyup blur", "#chDiscount", function() {
var amd = $('#cBalance').val();
var disc = $('#chDiscount').val();
if (disc != '' && amd != '')
$('#cBalance').val((parseInt(amd)) - (parseInt(disc)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="cBalance" value="1575">
<br>
<input type="number" id="chDiscount">
I have a prepopulated value for cBalance input i.e.,1575. When I type discount value for example 500 in chDiscount input, it gives me 1020 and not 1075. And I want the value 1575 to be 1575 when there is no value or zero value in the chDiscount input. And the caculation keeps incrementing the cBalance value whenever I type new value in the chDiscount input, it does not increment from the default value.
My exptected output: When I type 500, I want the default value 1575 to be 1075. And if I delete the 1000 that I type, I want back the default value 1575 in cBalance. And If I type 5 in chDiscount, the default value would become 1570 and if I hit backspace to delete, it would become 1575 again.
How can I achieve this? Where did I go wrong? Please help.

$(document).on("change keyup blur", "#chDiscount", function() {
var amd = $('#cBalance').val();
var disc = $('#chDiscount').val();
if (disc != '' && amd != '') {
$('#result').val((parseInt(amd)) - (parseInt(disc)));
}else{
$('#result').val(parseInt(amd));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="cBalance" value="1575">
<br>
<input type="number" id="chDiscount">
<br>
<input type="number" id="result">
I added result field because otherwise you couldn't specify amd

As above mention code is just subtracting the main value. here is exact solution
<input type="number" id="cBalance" value="1575"> <br>
<input type="number" id="chDiscount"> <br>
<input type="number" id="result">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(document).on("change keyup blur", "#chDiscount", function() {
var main = $('#cBalance').val();
var disc = $('#chDiscount').val();
var dec = (disc/100).toFixed(2); //its convert 10 into 0.10
var mult = main*dec; // gives the value for subtract from main value
var discont = main-mult;
$('#result').val(discont);
});
JSFIDDLE

Why does "greater than" comparison of numbers give unexpected result

There is an input field, like this,
<input class="form-control" type="number" name="recieved_by_quantity" id="quantity" />
Dynamically, a value is assigned to the input tag, like this,
document.getElementById('quantity').value = qu; //var qu=11 lets say
Now, what i want is, if the user manually inputs a value greater than "qu", then the value would automatically change itself to "qu".
What i did for this is something like,
document.getElementById('quantity').addEventListener("change", function() {
var qc = this.value;
if(qc>qu) {
this.value = qu;
}
});
The strange thing that is happening is if i input any value from 2 to infinity, it is changing all of them to 11. Only value it does not change are 0,1,10,100,1000,10000 and so on..
I am completely confused. Please help.

Its simple, use parseInt to get actual number value of your text-area.
You are getting string by default.
this.value is giving you '11'
parseInt(this.value) is giving you 11.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<input class="form-control" type="number" name="recieved_by_quantity" id="quantity" />
</body>
<script>
var qu = 11;
document.getElementById('quantity').value = qu;
document.getElementById('quantity').addEventListener("change", function() {
var qc = parseInt(this.value);
if(qc>qu) {
this.value = qu;
}
});
</script>
</html>

Use parseInt
var qc = parseInt(this.value)

Number Converter JQuery

I am a beginner and I have the following problem/code for the main body:
<body>
<form action="#">
<input type="text" id="start" />
=
<input type="text" id="finish" />
</form>
<script>
$(function() {
var cVal = $("#start").val();
var fVal = $("#finish").val();
});
</script>
</body>
With two text boxes, I would like the value entered in the celsius text box to be converted into fahrenheit in the other text box. I have tried to use the
keyup()
function but failed to produce the results I want.
typing 15 into the celsius box should result in 59 in fahrenheit. I understand that .val() does not take any arguments, so where would I do the computation for converting the numbers? And how can I incorporate keyup?
Any help is appreciated!

The val function does take arguments, you can pass it the new value and it will update textbox contents. Click the link on val, it will take you to the jQuery documentation, where all possible calls are explained. Or see the example below.
function fahrenheitToCelsius(fahrenheit) {
var val = 0;
// perform calculation
return val;
}
function celsiusToFarenheit(celsius) {
var val = 0;
// perform calculation
return val;
}
$(function() {
$("#start").on('keyup', function() {
$("#finish").val(celsiusToFarenheit($(this).val()));
});
$("#finish").on('keyup', function() {
$("#start").val(fahrenheitToCelsius($(this).val()));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<input type="text" id="start" /> Celsius
=
<input type="text" id="finish" /> Fahrenheit
</form>

This is such a simple thing to do, jQuery is not needed at all, and because you haven't tagged jQuery here comes a plain javascript solution.
What you need to do is the add a keyup trigger on each of the input elements.
To grab our input fields we use document.getElementById(id), we use this because you've added the id attribute to your fields (it's faster than the latter method I'm mentioning). We could've used document.querySelector(selector) to get our input fields to. If you had used name="celsius" on the celsius field, we could've used document.querySelector('input[name="celsius"]') to grab that element.
What we need to do next is to an a keyup trigger to both our input fields. This is done with element.onkeyup = function() {}, in each of those functions we calculate the value for the other field.
var celsius = document.getElementById('start'),
fahrenheit = document.getElementById('finish');
celsius.onkeyup = function() {
fahrenheit.value = this.value * 9/5 + 32;
}
fahrenheit.onkeyup = function() {
celsius.value = (this.value - 32) * 5/9;
}
<form action="#">
<input type="text" id="start" /> Celsius
=
<input type="text" id="finish" /> Fahrenheit
</form>

The jQuery .val() function is an overload function which means it takes 0 up to 1 argument and it's effect varies on the number of arguments passed.
As you can see in my example calling celsiusInput.val() just returns the current value of the field. However if you use it like this farenheitOutput.val(farenheit) the current value of the input is overwritten by the variable passed.
const updateFarenheit = () => {
// find the input and output in the dom by their id
const celsiusInput = $("#start");
const farenheitOutput = $("#finish");
// get the input value
const celsius = celsiusInput.val();
const farenheit = celsius * 9 / 5 + 32;
// update the farenheit output
farenheitOutput.val(farenheit);
}
// this function runs when all js is loaded aka. "document ready"
$(document).ready(function() {
// get input field by id
const celsiusInput = $("#start");
// we pass the updateFarenheit function we defined before as the function which should run
// as soon as the keyup event occures on our celsiusInput field
celsiusInput.keyup(updateFarenheit);
});
<html lang="">
<head>
<meta charset="utf-8">
<title>Celsius to Farenheit</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form action="#">
<input type="text" id="start" /> =
<input type="text" id="finish" />
</form>
</body>
</html>