Addition und Multiplikation von zwei Eingabewerten funktioniert nicht

Question

Ich versuche, eine einfache onclick() Funktion mit getElementById zu machen, um Werte aus einer Eingabegruppe zu bekommen, aber eine meiner lokalen Variablen scheint nicht in nur einer anderen lokalen Variablen zu arbeiten.

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> 

Ich habe versucht das Debuggen es, und die Variable bot wenn in der wPer Variable setzen scheint nur Chaos alles auf. Wenn ich Bot von wPer entferne, funktioniert es genauso wie es sollte. Putting bot in anderen Variablen verursacht auch keine Probleme. Wenn beispielsweise hgt und bot 10 sind, sollte die Funktion 100/30 zurückgeben, stattdessen wird 0.04975124378109453 zurückgegeben. Wenn ich bot von wPer entferne, gibt die Funktion für die gleichen Werte 100/20 wie es sollte zurück.

Answer 1

Was

Da hgt und bot sind String parseInt() Funktion fehlt, wenn Sie wPer und cSec sind Rechen, eine Verkettung geschieht auch. Nehmen wir an, dass der Benutzer 10 bzw. 10 für den ersten und zweiten Eingang eingibt.

• wPer: ((2 * hgt) + bot) = ((2*"10")+"20") = 20 + "20" = 2020. Der times-Operator * führt eine Multiplikation durch, auch wenn es sich um zwei Strings handelt, die Operanden sind, weil sie geparst werden, während der Operator + eine Verkettung durchführt, wenn einer der Operanden eine Zeichenkette ist.
• WBK: (hgt * bot) = ("10"*"10") = 100, eine normale Multiplikation, wenn beide Operanden Strings
• 100/1020 sind, wird die Ausgabe Ihrer Funktion.

Im Folgenden finden Sie, was Sie tun wollen, sind 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>