javascript - 两个输入值的加法和乘法不起作用

Question

我正在尝试使用 getElementById 制作一个简单的 onclick() 函数，以从输入组中获取值，但我的一个局部变量似乎仅在另一个局部变量。

    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>

我尝试过调试它，当将变量 bot 放入 wPer 变量中时，似乎只会把一切搞乱。当我从 wPer 中删除机器人时，它会正常工作。将 bot 放入其他变量中也不会导致任何问题。例如，当 hgt 和 bot 为 10 时，函数应返回 100/30，但它返回 0.04975124378109453。当我从 wPer 中删除 bot 时，对于相同的值，该函数将按其应有的方式返回 100/20。

Answer 1

缺少的是parseInt()函数

因为hgt和bot是字符串，所以当你计算wPer和cSec时，也会发生串联。假设用户在第一个和第二个输入中分别输入 10 和 10。

• wPer:((2 * hgt) + bot) = ((2*"10")+"20") = 20 + "20"= 2020。即使是两个字符串作为操作数，时间运算符 * 也会执行乘法，因为它们将被解析，而当操作数之一是时，+ 运算符将执行串联一个字符串。
• cSec:(hgt * bot) = ("10"*"10") = 100，普通乘法，尽管两个操作数都是字符串
• 100/1020 将是函数的输出。

下面是您想要执行的操作，使用 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>