Mixing
text field is not reading values by clicking button but until i add the value physically into text field
0
I have three text fields each field has the button to increment or decrement the value and final text field which is going to show calculate of each of field values.
All are working well but the problem is. Whenever I'm adding a value into the those three input field physically so its getting the value and displaying it.
first pro -> but whenever im trying to add value through of the button clicking its doesn't displaying the values.
second pro-> by default im adding values each of text field they should display final calculated values into my fourth textfield which is right top of all
but until I touch any of text field it is not displaying the calculated values on the same.
Please help me it is really needed. Here is my source code.
window.sum = () => document.getElementById('get_my_value').value =Array.from(document.querySelectorAll('#txt1,#txt2,#txt3')).map(e => parseInt(e.value) || 0).reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst()">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst()">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec()">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec()">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird()">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird()">
</div>
</div>
</div>
</body>
</html>Now you can see there is not work by clicking button but its working until you add values physically.
Second is right top there is final calculated text field which is showing totalvalues it is also not displaying values by default until you add or click on any of each text field.
thanks in advance.
javascript php jquery bootstrap-4 codeigniter-3
edited Nov 20 '18 at 8:35
Rory McCrossan
242k29207245
asked Nov 20 '18 at 8:29
md servermd server
647
add a comment |
0
I have three text fields each field has the button to increment or decrement the value and final text field which is going to show calculate of each of field values.
All are working well but the problem is. Whenever I'm adding a value into the those three input field physically so its getting the value and displaying it.
first pro -> but whenever im trying to add value through of the button clicking its doesn't displaying the values.
second pro-> by default im adding values each of text field they should display final calculated values into my fourth textfield which is right top of all
but until I touch any of text field it is not displaying the calculated values on the same.
Please help me it is really needed. Here is my source code.
window.sum = () => document.getElementById('get_my_value').value =Array.from(document.querySelectorAll('#txt1,#txt2,#txt3')).map(e => parseInt(e.value) || 0).reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst()">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst()">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec()">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec()">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird()">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird()">
</div>
</div>
</div>
</body>
</html>Now you can see there is not work by clicking button but its working until you add values physically.
Second is right top there is final calculated text field which is showing totalvalues it is also not displaying values by default until you add or click on any of each text field.
thanks in advance.
javascript php jquery bootstrap-4 codeigniter-3
edited Nov 20 '18 at 8:35
Rory McCrossan
242k29207245
asked Nov 20 '18 at 8:29
md servermd server
647
add a comment |
0
0
0
I have three text fields each field has the button to increment or decrement the value and final text field which is going to show calculate of each of field values.
All are working well but the problem is. Whenever I'm adding a value into the those three input field physically so its getting the value and displaying it.
first pro -> but whenever im trying to add value through of the button clicking its doesn't displaying the values.
second pro-> by default im adding values each of text field they should display final calculated values into my fourth textfield which is right top of all
but until I touch any of text field it is not displaying the calculated values on the same.
Please help me it is really needed. Here is my source code.
window.sum = () => document.getElementById('get_my_value').value =Array.from(document.querySelectorAll('#txt1,#txt2,#txt3')).map(e => parseInt(e.value) || 0).reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst()">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst()">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec()">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec()">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird()">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird()">
</div>
</div>
</div>
</body>
</html>Now you can see there is not work by clicking button but its working until you add values physically.
Second is right top there is final calculated text field which is showing totalvalues it is also not displaying values by default until you add or click on any of each text field.
thanks in advance.
javascript php jquery bootstrap-4 codeigniter-3
edited Nov 20 '18 at 8:35
Rory McCrossan
242k29207245
asked Nov 20 '18 at 8:29
md servermd server
647
I have three text fields each field has the button to increment or decrement the value and final text field which is going to show calculate of each of field values.
All are working well but the problem is. Whenever I'm adding a value into the those three input field physically so its getting the value and displaying it.
first pro -> but whenever im trying to add value through of the button clicking its doesn't displaying the values.
second pro-> by default im adding values each of text field they should display final calculated values into my fourth textfield which is right top of all
but until I touch any of text field it is not displaying the calculated values on the same.
Please help me it is really needed. Here is my source code.
window.sum = () => document.getElementById('get_my_value').value =Array.from(document.querySelectorAll('#txt1,#txt2,#txt3')).map(e => parseInt(e.value) || 0).reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst()">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst()">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec()">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec()">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird()">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird()">
</div>
</div>
</div>
</body>
</html>Now you can see there is not work by clicking button but its working until you add values physically.
Second is right top there is final calculated text field which is showing totalvalues it is also not displaying values by default until you add or click on any of each text field.
thanks in advance.
window.sum = () => document.getElementById('get_my_value').value =Array.from(document.querySelectorAll('#txt1,#txt2,#txt3')).map(e => parseInt(e.value) || 0).reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst()">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst()">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec()">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec()">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird()">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird()">
</div>
</div>
</div>
</body>
</html>window.sum = () => document.getElementById('get_my_value').value =Array.from(document.querySelectorAll('#txt1,#txt2,#txt3')).map(e => parseInt(e.value) || 0).reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst()">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst()">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec()">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec()">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird()">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird()">
</div>
</div>
</div>
</body>
</html>javascript php jquery bootstrap-4 codeigniter-3
javascript php jquery bootstrap-4 codeigniter-3
edited Nov 20 '18 at 8:35
Rory McCrossan
242k29207245
asked Nov 20 '18 at 8:29
md servermd server
647
edited Nov 20 '18 at 8:35
Rory McCrossan
242k29207245
asked Nov 20 '18 at 8:29
md servermd server
647
edited Nov 20 '18 at 8:35
Rory McCrossan
242k29207245
edited Nov 20 '18 at 8:35
Rory McCrossan
242k29207245
edited Nov 20 '18 at 8:35
Rory McCrossan
242k29207245
242k29207245
asked Nov 20 '18 at 8:29
md servermd server
647
asked Nov 20 '18 at 8:29
md servermd server
647
asked Nov 20 '18 at 8:29
md servermd server
647
647
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
2
The buttons don't work as they don't trigger the onkeyup method which is used to calculate the sum and display the sum by calling the sum() method. So, instead, you can call both the increase/decrease functions and the sum() method when you click the button (thus adding/subtracting and recalculating and displaying the sum):
onclick="decreaseValueFirst(); sum();"
You can apply this for each of your buttons to get the following working result:
window.sum = () =>
document.getElementById('get_my_value').value =
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3')
).map(e => parseInt(e.value) || 0)
.reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst(); sum();">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst(); sum();">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec(); sum();">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec(); sum();">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird(); sum();">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird(); sum();">
</div>
</div>
</div>
</body>
</html>answered Nov 20 '18 at 8:40
Nick ParsonsNick Parsons
5,1022721
1
Nick you are awesome dude. thanks alottttttttt
– md server
Nov 20 '18 at 8:45
@mdserver no worries! Glad to help :)
– Nick Parsons
Nov 20 '18 at 8:46
add a comment |
0
You're calling your sum() function on the keyup event on the text boxes. When you change the value in the text box from the +/- buttons, the keyup event doesn't fire. Call your sum() function after you change the value.
Sample code:
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
sum(); // <-- New line added
}
answered Nov 20 '18 at 8:39
peeebeeepeeebeee
1,05711119
okay sir got it. thanks
– md server
Nov 20 '18 at 8:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388923%2ftext-field-is-not-reading-values-by-clicking-button-but-until-i-add-the-value-ph%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
The buttons don't work as they don't trigger the onkeyup method which is used to calculate the sum and display the sum by calling the sum() method. So, instead, you can call both the increase/decrease functions and the sum() method when you click the button (thus adding/subtracting and recalculating and displaying the sum):
onclick="decreaseValueFirst(); sum();"
You can apply this for each of your buttons to get the following working result:
window.sum = () =>
document.getElementById('get_my_value').value =
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3')
).map(e => parseInt(e.value) || 0)
.reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst(); sum();">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst(); sum();">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec(); sum();">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec(); sum();">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird(); sum();">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird(); sum();">
</div>
</div>
</div>
</body>
</html>answered Nov 20 '18 at 8:40
Nick ParsonsNick Parsons
5,1022721
1
Nick you are awesome dude. thanks alottttttttt
– md server
Nov 20 '18 at 8:45
@mdserver no worries! Glad to help :)
– Nick Parsons
Nov 20 '18 at 8:46
add a comment |
2
The buttons don't work as they don't trigger the onkeyup method which is used to calculate the sum and display the sum by calling the sum() method. So, instead, you can call both the increase/decrease functions and the sum() method when you click the button (thus adding/subtracting and recalculating and displaying the sum):
onclick="decreaseValueFirst(); sum();"
You can apply this for each of your buttons to get the following working result:
window.sum = () =>
document.getElementById('get_my_value').value =
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3')
).map(e => parseInt(e.value) || 0)
.reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst(); sum();">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst(); sum();">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec(); sum();">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec(); sum();">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird(); sum();">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird(); sum();">
</div>
</div>
</div>
</body>
</html>answered Nov 20 '18 at 8:40
Nick ParsonsNick Parsons
5,1022721
1
Nick you are awesome dude. thanks alottttttttt
– md server
Nov 20 '18 at 8:45
@mdserver no worries! Glad to help :)
– Nick Parsons
Nov 20 '18 at 8:46
add a comment |
2
2
2
The buttons don't work as they don't trigger the onkeyup method which is used to calculate the sum and display the sum by calling the sum() method. So, instead, you can call both the increase/decrease functions and the sum() method when you click the button (thus adding/subtracting and recalculating and displaying the sum):
onclick="decreaseValueFirst(); sum();"
You can apply this for each of your buttons to get the following working result:
window.sum = () =>
document.getElementById('get_my_value').value =
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3')
).map(e => parseInt(e.value) || 0)
.reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst(); sum();">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst(); sum();">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec(); sum();">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec(); sum();">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird(); sum();">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird(); sum();">
</div>
</div>
</div>
</body>
</html>answered Nov 20 '18 at 8:40
Nick ParsonsNick Parsons
5,1022721
The buttons don't work as they don't trigger the onkeyup method which is used to calculate the sum and display the sum by calling the sum() method. So, instead, you can call both the increase/decrease functions and the sum() method when you click the button (thus adding/subtracting and recalculating and displaying the sum):
onclick="decreaseValueFirst(); sum();"
You can apply this for each of your buttons to get the following working result:
window.sum = () =>
document.getElementById('get_my_value').value =
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3')
).map(e => parseInt(e.value) || 0)
.reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst(); sum();">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst(); sum();">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec(); sum();">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec(); sum();">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird(); sum();">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird(); sum();">
</div>
</div>
</div>
</body>
</html>window.sum = () =>
document.getElementById('get_my_value').value =
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3')
).map(e => parseInt(e.value) || 0)
.reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst(); sum();">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst(); sum();">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec(); sum();">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec(); sum();">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird(); sum();">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird(); sum();">
</div>
</div>
</div>
</body>
</html>window.sum = () =>
document.getElementById('get_my_value').value =
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3')
).map(e => parseInt(e.value) || 0)
.reduce((a, b) => a + b, 0)
function increaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt1').value = value;
}
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
}
function increaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt2').value = value;
}
function decreaseValueSec() {
// body...
var value = parseInt(document.getElementById('txt2').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt2').value = value;
}
function increaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('txt3').value = value;
}
function decreaseValueThird() {
// body...
var value = parseInt(document.getElementById('txt3').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt3').value = value;
}<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Night</label>
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</div>
</div>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst(); sum();">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst(); sum();">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec(); sum();">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec(); sum();">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird(); sum();">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird(); sum();">
</div>
</div>
</div>
</body>
</html>answered Nov 20 '18 at 8:40
Nick ParsonsNick Parsons
5,1022721
answered Nov 20 '18 at 8:40
Nick ParsonsNick Parsons
5,1022721
answered Nov 20 '18 at 8:40
Nick ParsonsNick Parsons
5,1022721
answered Nov 20 '18 at 8:40
Nick ParsonsNick Parsons
5,1022721
5,1022721
1
Nick you are awesome dude. thanks alottttttttt
– md server
Nov 20 '18 at 8:45
@mdserver no worries! Glad to help :)
– Nick Parsons
Nov 20 '18 at 8:46
add a comment |
1
Nick you are awesome dude. thanks alottttttttt
– md server
Nov 20 '18 at 8:45
@mdserver no worries! Glad to help :)
– Nick Parsons
Nov 20 '18 at 8:46
1
1
Nick you are awesome dude. thanks alottttttttt
– md server
Nov 20 '18 at 8:45
Nick you are awesome dude. thanks alottttttttt
– md server
Nov 20 '18 at 8:45
@mdserver no worries! Glad to help :)
– Nick Parsons
Nov 20 '18 at 8:46
@mdserver no worries! Glad to help :)
– Nick Parsons
Nov 20 '18 at 8:46
add a comment |
0
You're calling your sum() function on the keyup event on the text boxes. When you change the value in the text box from the +/- buttons, the keyup event doesn't fire. Call your sum() function after you change the value.
Sample code:
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
sum(); // <-- New line added
}
answered Nov 20 '18 at 8:39
peeebeeepeeebeee
1,05711119
okay sir got it. thanks
– md server
Nov 20 '18 at 8:46
add a comment |
0
You're calling your sum() function on the keyup event on the text boxes. When you change the value in the text box from the +/- buttons, the keyup event doesn't fire. Call your sum() function after you change the value.
Sample code:
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
sum(); // <-- New line added
}
answered Nov 20 '18 at 8:39
peeebeeepeeebeee
1,05711119
okay sir got it. thanks
– md server
Nov 20 '18 at 8:46
add a comment |
0
0
0
You're calling your sum() function on the keyup event on the text boxes. When you change the value in the text box from the +/- buttons, the keyup event doesn't fire. Call your sum() function after you change the value.
Sample code:
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
sum(); // <-- New line added
}
answered Nov 20 '18 at 8:39
peeebeeepeeebeee
1,05711119
You're calling your sum() function on the keyup event on the text boxes. When you change the value in the text box from the +/- buttons, the keyup event doesn't fire. Call your sum() function after you change the value.
Sample code:
function decreaseValueFirst() {
// body...
var value = parseInt(document.getElementById('txt1').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('txt1').value = value;
sum(); // <-- New line added
}
answered Nov 20 '18 at 8:39
peeebeeepeeebeee
1,05711119
answered Nov 20 '18 at 8:39
peeebeeepeeebeee
1,05711119
answered Nov 20 '18 at 8:39
peeebeeepeeebeee
1,05711119
answered Nov 20 '18 at 8:39
peeebeeepeeebeee
1,05711119
1,05711119
okay sir got it. thanks
– md server
Nov 20 '18 at 8:46
add a comment |
okay sir got it. thanks
– md server
Nov 20 '18 at 8:46
okay sir got it. thanks
– md server
Nov 20 '18 at 8:46
okay sir got it. thanks
– md server
Nov 20 '18 at 8:46
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388923%2ftext-field-is-not-reading-values-by-clicking-button-but-until-i-add-the-value-ph%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
