CODEWITHSUNDEEP
javascripthtml
yanabeca
yanabeca

Reputation: 35

Addition and multiplication of two input values does not work

I'm trying to make a simple onclick() function using getElementById to get values from an input group but one of my local variables seems to not work within only one other local variable.

    function hRadOpRec() {
    var hgt = document.getElementById("oRecHgt").value;
    var bot = document.getElementById("oRecBot").value;
    var wPer = ((2 * hgt) + bot);
    var cSec = (hgt * bot);
    var hRad = (cSec / wPer);
    return document.getElementById("hRORec").value = hRad;
    }

 <div class="col-md-3 collapse" id="hRadOpRec">
  <h4>Açık Dikdörtgen Kanal Hidrolik Yarıçap</h4>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">Sıvı Yüksekliği (m)</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1" id="oRecHgt">
  </div>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">Taban Genişliği (m)</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1" id="oRecBot">
  </div>
  <button type="button" class="btn" onclick="hRadOpRec()">Hesapla</button>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">Hidrolik Yarıçap (m)</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1" readonly id="hRORec">
  </div> 
 </div>

I've tried debugging it, and the variable bot when put in the wPer variable seems to just mess everything up. When I remove bot from wPer it works just as it should. Putting bot in other variables also doesn't cause any problems. For example when hgt and bot are 10 the function should return 100/30 but instead it returns 0.04975124378109453. When I remove bot from wPer, for the same values the function returns 100/20 as it should.

Upvotes: 0

Views: 71

Answers (1)

edkeveked
edkeveked

Reputation: 18371

What was missing is parseInt() function

Because hgt and bot are string, when you are computing wPer and cSec, a concatenation also occurs. Let suppose that the user types in 10 and 10 respectively for the first and second input.

  • wPer: ((2 * hgt) + bot) = ((2*"10")+"20") = 20 + "20" = 2020. The times operator * will perform a multiplication even when it is two strings that are operands because they will be parsed whereas the + operator will perform a concatenation when one of the operand is a string.
  • cSec: (hgt * bot) = ("10"*"10") = 100, a normal multiplication, though both operands are strings
  • 100/1020 will be the output of your function.

Below is what you want to do, using parseInt()

function hRadOpRec() {
    var hgt = parseInt(document.getElementById("oRecHgt").value);
    var bot = parseInt(document.getElementById("oRecBot").value);
    var wPer = ((2 * hgt) + bot);
    var cSec = (hgt * bot);
    var hRad = (cSec / wPer);
    return document.getElementById("hRORec").value= hRad;
    }
 <div class="col-md-3 collapse" id="hRadOpRec">
  <h4>Açık Dikdörtgen Kanal Hidrolik Yarıçap</h4>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">Sıvı Yüksekliği (m)</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1" id="oRecHgt">
  </div>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">Taban Genişliği (m)</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1" id="oRecBot">
  </div>
  <button type="button" class="btn" onclick="hRadOpRec()">Hesapla</button>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">Hidrolik Yarıçap (m)</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1" readonly id="hRORec">
  </div> 
 </div>

Upvotes: 1

Related Questions