CODEWITHSUNDEEP
javascripthtml
Dominic
Dominic

Reputation: 341

Incrementing instead of decrementing the value from input type number

Onclick wordcount input type number (increment and decrement) should display the value at Total Cost.

Onclick quantity input type number (increment and decrement) should take value from Total Cost and calculate display the value at Total Cost.

<input class="form-control" type="number" id="wordcount" onchange="calTotal();" name="wordcount" value="" min="1" max="100000000000" id="wordcount" >

<input class="form-control" type="number"  id="quantity"  onchange="calTotal();" name="quantity" value="" min="1" max="100000000000">

Display the results here:

<input type="number"  readonly="readonly" min="1n" name="total" id="running-summary-total" value="0.00">

enter image description here

Javascript to do calculations:

<script>
function calTotal(){
var z = document.getElementById("wordcount").value;

    console.log(z)
   if (document.getElementById("wordcount").value) {
     var wc = z * 0.098;
   document.getElementById("running-summary-total").value =  +wc;
    }
   if (document.getElementById("quantity").value) {
    var r = document.getElementById("running-summary-total").value 
     var wc = r * 2;
   document.getElementById("running-summary-total").value =  +wc;
    }
}
</script>

enter image description here I have no issue with the wordcount function but I have issue with quantity when I decrement the value in document.getElementById("quantity").value it's incrementing it instead of decrementing it by 2.

Upvotes: 0

Views: 930

Answers (2)

Ramon de Vries
Ramon de Vries

Reputation: 1342

according to the comments and provided explaination. i think this is what you are looking for:

function calTotal(){
	let wordcount = $("#wordcount").val();//get wordcount value
  let quantity = $("#quantity").val();//get quantity value
	if(wordcount){//if wordcount has value
		var wc = wordcount * 0.098;
    $("#running-summary-total").val(wc);
	}
  if(quantity && quantity < 0){//if quantity has value and its smaller then 0 (negative value)
  	let oldtotal = $("#running-summary-total").val();//getting the old total value
    let calc = Math.abs(quantity) * 2;//added Math.abs to turn negative number into positive, and mulitply by 2
    let newtotal = oldtotal / calc;// here we divide the old total by the quatity times 2
    $("#running-summary-total").val(newtotal);
  }
  if(quantity && quantity > 0){//if quantity has value and its bigger then 0 (positive value)
  	let oldtotal = $("#running-summary-total").val();//getting the old total value
    let calc = quantity * 2;//here we multiply quantity by 2
    let newtotal = oldtotal * calc;// here we multiply the old total by the quantity times 2
    $("#running-summary-total").val(newtotal);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <input class="form-control" type="number" id="wordcount" onchange="calTotal();" name="wordcount" value="" min="1" max="100000000000">

   <input class="form-control" type="number"  id="quantity"  onchange="calTotal();" name="quantity" value="" min="" max="100000000000">
   
   <input type="number"  readonly="readonly" min="1n" name="total" id="running-summary-total" value="0.00">

i've rewritten it into jquery code(my plain javascript isn't very good)

edit added support for negative values and multiply for positive values(was dividing at first).

Upvotes: 1

James Burgess
James Burgess

Reputation: 497

Your code is currently taking in the value of total and multiplying them by 2 without considering the value of the quantity input or the value of wordcount. 

function calTotal(){
  var wordCount = document.getElementById("wordcount").value;
  let quantity = document.getElementById("quantity").value;

  document.getElementById("running-summary-total").value =  wordCount * quantity

}

Upvotes: 1

Related Questions