Javascript Basic Increment and Decrement - javascript

Why isn't dec() decreasing the value?
<div id="variableTest">8</div>
<label id="incButton" onclick="inc()">+</div> </br>
<label id="decButton" onclick="dec()">-</div> </br>
​
function dec() {
var testDec = document.getElementById("variableTest").innerHTML;
testDec--;
}
function inc() {
var testInc = document.getElementById("variableTest").innerHTML;
testInc++;
}​
http://jsfiddle.net/fv6VA/8/

element.innerHTML returns a string, not a number. You should use something like this:
var element = document.getElementById("variableTest");
element_number = parseFloat(element.innerHTML);
element_number++;
element.innerHTML = element_number;

Essentially you have made a copy of innerHTML, and are just decrementing it in javascript memory. You haven't actually set the innerHTML of the variableTest node.
function dec() {
var testDec = document.getElementById("variableTest").innerHTML;
testDec--;
document.getElementById("variableTest").innerHTML = testDec;
}
UPDATE
Also, your HTML is messed up. You need to close your label properly
<div id="variableTest">8</div>
<label id="incButton" onclick="inc()">+</label> </br>
<label id="decButton" onclick="dec()">-</label> </br>

<div class="container">
<input type="button" onclick="decrementValue()" value="-" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="1" id="number" />
<input type="button" onclick="incrementValue()" value="+" />
</div>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if(value<10){
value++;
document.getElementById('number').value = value;
}
}
function decrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if(value>1){
value--;
document.getElementById('number').value = value;
}
}
</script>

Related

How can I increment and decrement value with unique id?

I have this loop, The id is unique. When I try to increment it is working for only one input field. How can I increment and decrement using unique id?
#forelse($allproduct as $key=>$data)
<tr>
<td data-label="#lang('Date')">
<div class="quantity col-md-8" style="display:flex; ">
<input type="text" value="" class="form-control req amnt display-inline" id="qtyid[{{$data->product_id}}]" min="0">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty" onclick="incrementValue()">+</div>
<div class="quantity-button quantity-down qty" onclick="decrementValue()">-</div>
</div>
</div>
</td>
</tr>
#endforelse
Javascript
function incrementValue()
{
var value = parseInt(document.getElementById("qtyid").value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('qtyid').value = value;
}
function decrementValue()
{
var value = parseInt(document.getElementById('qtyid').value, 10);
value = isNaN(value) ? 0 : value;
value--;
if(value == -1) {
value = 0;
}
document.getElementById('qtyid').value = value;
}
I suggest you use an approach that doesn't need IDs.
function incrementValue(e)
{
// use the quantity field's DOM position relative to the button that was clicked
const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt");
var value = parseInt(qty.value, 10);
value = isNaN(value) ? 0 : value;
value++;
qty.value = value;
}
function decrementValue(e)
{
const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt");
var value = parseInt(qty.value, 10);
value = isNaN(value) ? 0 : value;
value--;
if(value == -1) {
value = 0;
}
qty.value = value;
}
#forelse($allproduct as $key=>$data)
<tr>
<td data-label="#lang('Date')">
<div class="quantity col-md-8" style="display:flex; ">
<input type="text" value="" class="form-control req amnt display-inline" min="0">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty" onclick="incrementValue(event)">+</div>
<div class="quantity-button quantity-down qty" onclick="decrementValue(event)">-</div>
</div>
</div>
</td>
</tr>
#endforelse

Assign value of number input to value of radio Button

I have a radio button that when selected reveals a touchspin, anytime the touchspin increase or decrease button is being clicked i want the value of the radio button to be set to the value of the touch spin’s number input. I tried putting ('input.custom-vote:radio').val(value) at the bottom of the increaseValue and decreaseValue function but it still doesn't work. I will greatly appreciate any help to solve this problem.
<!--Touch-spin increase Value-->
function increaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
<!--Touch-spin decrease Value-->
function decreaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('number').value = value;
}
<div class="custom-control custom-radio mb-3">
<input name="votes" value="0" class="form-check-input custom-control-input custom-vote" id="custom" type="radio">
<label class="custom-control-label form-check-label" for="custom">Custom Vote</label>
</div>
<div class="input-group custom-vote">
<button id="decrease" onclick="decreaseValue()" value="Decrease Value" type="button"></button>
<input type="number" maxlength="6" size="5" class="touchspin form-control custom-count" id="number" value="150">
<button id="increase" onclick="increaseValue()" value="Increase Value" type="button"></button>
</div>
This might work:
document.getElementById("custom").value = document.getElementById('number').value

Cart increment and decrement values JS

I'm trying to increment and decrement values in a cart. I first implemented it by targeting an id, and my js code worked. But then I realized that I'll have mulitple items in the cart so I won't be able to target the IDs, so then I changed from getElementById to getElementsByClassName, but the js code no longer works. How can I solve this?
<div class="quantity">
<form>
<div class="value-button" class="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" onclick="increaseValue()" value="Increase Value">+</div>
</form>
</div>
JS
// Increase Value //
function increaseValue() {
var value = parseInt(document.getElementsByClassName('number').value, 10);
value = isNaN(value) ? 1 : value;
value++;
document.getElementsByClassName('number').value = value;
}
// Decrease Value //
function decreaseValue() {
var value = parseInt(document.getElementsByClassName('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementsByClassName('number').value = value;
}
My Previous code that was working
<div class="quantity">
<form>
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" id="number" value="1" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</form>
</div>
JS
// Increase Value //
function increaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
// Decrease Value //
function decreaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('number').value = value;
}
getElementsByClassName returns an HTMLCollection; you need to iterate over that and set the value on each contained element individually rather than trying to set the value of the HTMLCollection itself.
Or just use querySelector, like this:
// Increase Value //
function increaseValue() {
var value = parseInt(document.querySelector('.number').value, 10);
value = isNaN(value) ? 1 : value;
value++;
document.querySelector('.number').value = value;
}
// Decrease Value //
function decreaseValue() {
var value = parseInt(document.querySelector('.number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.querySelector('.number').value = value;
}
getElementsByClassName return collection.
Instead document.getElementsByClassName('number').value you need use document.getElementsByClassName('number')[0].value
Instead of onclick in html use addEventListener.
For example you have some quantity.
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
let quantities = document.getElementsByClassName('quantity');
for (let i=0; i<quantities.length; i++) {
let q = quantities[i];
let increaseElement = q.getElementsByClassName('increase')[0];
increaseElement.addEventListener('click', increaseValue, false);
function increaseValue() {
var value = parseInt(q.getElementsByClassName('number')[0].value, 10);
value++;
q.getElementsByClassName('number')[0].value = value;
}
}

How to get the value of a numeric textbox that has a preset value of 0 to another textbox using javascript

Please I want to use the above code for numeric values but its not getting the right value, it keeps returning 0. (What I mean by "It keeps returning 0.is: if i type 2 in textbox day1, textbox day2 will still be 0 instead of 2). How can I do this? See my usage below.
const firstInput = document.getElementById('day1'),
secondInput = document.getElementById('day2');
secondInput.value = '0';
function Day1() {
secondInput.value = firstInput.value;
}
function handleDay1Blur() {
if (!firstInput.value) {
secondInput.value = firstInput.value = '0';
}
}
<input id="day1" size="40px" value="0" onblur="handleDay1Blur()" onfocus="if(this.value==0){
this.value='';};" onkeyup="Day1();">!
<input type="text" id="day2" readonly size="40px" class="textbox-modal">
<input id="Button1" type="button" value="Preview" class="button" onclick="Day1()"
/>
I don't understand, it works fine, no?
const firstInput = document.getElementById('day1'),
secondInput = document.getElementById('day2');
secondInput.value = '0';
function Day1() {
secondInput.value = firstInput.value;
}
function handleDay1Blur() {
if (!firstInput.value) {
secondInput.value = firstInput.value = '0';
}
}
<input id="day1" size="40px" value="0" onblur="handleDay1Blur()" onfocus="if(this.value==0){ this.value='';};" onkeyup="Day1();">
<input type="text" id="day2" readonly size="40px" class="textbox-modal">
<input id="Button1" type="button" value="Preview" class="button" onclick="Day1()"
/>

Simple -+ button for javascript text input

I've got this script which I'm using with succes, but I've tried, and failed, to get it to stop making negative numbers when substracting pass 0..
<script language="javascript" type="text/javascript">
currentvalue = 1;
function setUp() {
document.getElementById("qty").value = currentvalue;
}
function addOne() {
currentvalue++;
document.getElementById("qty").value = currentvalue;
}
function subtractOne() {
currentvalue--;
document.getElementById("qty").value = currentvalue;
}
</script>
<input type="text" name="qty" id="qty" maxlength="12" value="1" title="qyu" class="input-text qty" />
<div onload="setUp()">
<input class="qtyplus" type="button" value="" onClick="addOne()">
<input class="qtyminus" type="button" value="" onClick="subtractOne()">
</div>
Anyone got the magic part which stop's the show at 0 ?
Thanks!
Just add an if statement here is the fiddle
and here is your subtractOne function
function subtractOne() {
if(document.getElementById("qty").value !== '0') {
currentvalue--;
document.getElementById("qty").value = currentvalue;
}

Categories