以 HTML 格式显示计算结果 (javascript）

Display result of computation (javascript) in HTML

本文关键字：javascript 结果 计算 HTML 格式 显示      更新时间：2023-09-26

我试图从html中获取两个数字并使用javascript返回两者的总和，但我的num1和num2包含HTMLInputElement？？

.html：

<head>
        <script type ="text/javascript" src="functions.js"></script>
    </head>
    <body>
        Value 1: <input type="text" id="tb1" name="tb1"><br/>
        Value 2: <input type="text" id="tb2" name="tb2"><br/>
        Result: <input type="text" id="tb3" name="tb3"><br/>
        <button onclick="validateForm()" Type="button" id="b1" name="b1">Go</button>
    </body>

JavaScript：

function validateForm() {
    var x = document.getElementById("tb1");
    var y = document.getElementById("tb2");
    if (x == null || x == "" || y == null || y == "")
    {
        alert("Value cannot be empty");
        return false;
    }
    else {
        //myAdd(x,y);
        alert(x + y);
        var num1 = parseFloat(x);
        var num2 = parseFloat(y);
        var total = num1 + num2;
        document.getElementById("tb3").innerHTML = total;
    }
}

您不是从这两个输入解析和添加values，而是objects本身。因此，当您将object与null进行比较时，您的if语句块将never run。另外，你不能设置innerHTML input，必须使用.value。
检查下面的代码段

parseFloat(x) //you must parseFloat(x.value),
document.getElementById("tb3").value = total; //you have to use .value instead of .innerHTML with input


function validateForm() {
  var x = document.getElementById("tb1").value;
  var y = document.getElementById("tb2").value;
  if (x == null || x === "" || y == null || y === "") {
    alert("Value cannot be empty");
    return false;
  } else {
    //myAdd(x,y);
    var num1 = parseFloat(x);
    var num2 = parseFloat(y);
    var total = num1 + num2;
    document.getElementById("tb3").value = total;
  }
}
Value 1:
<input type="text" id="tb1" name="tb1">
<br/>Value 2:
<input type="text" id="tb2" name="tb2">
<br/>Result:
<input type="text" id="tb3" name="tb3">
<br/>
<button onclick="validateForm()" Type="button" id="b1" name="b1">Go</button>

相关文章：