HTML 文本字段数学/在文本字段中显示答案

【问题标题】：HTML Text Field Math / Displaying Answer in Text FieldHTML 文本字段数学/在文本字段中显示答案
【发布时间】：2014-10-16 00:18:07
【问题描述】：

我对 HTML 或 javascript 编码没有太多经验，我正在尝试制作一个简单的计算应用程序。这是我目前所拥有的：

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {
     float:left;
     padding:5px 150px;

}
#h1 {
     float:left;
     padding:5px 150px;

}
#v1 {
     float:left;
     padding:5px 150px;

}
#p2 {
     padding:5px 150px;

}
#h2  {
     padding:5px 150px;

}
#v2 {
     padding:5px 150px;

}
</style>
</head>
<body>

<h1><center><b>Bernoulli's Energy Balance</b></center></h1>

<center><h2>P<sub>1</sub> + &rho;*g*h<sub>1</sub> + &rho;*(<sup>V<sub>1</sub><sup>2</sup></sup>&frasl;<sub>2</sub>) = P<sub>2</sub> + &rho;*g*h<sub>2</sub> + &rho;*(<sup>V<sub>2</sub><sup>2</sup></sup>&frasl;<sub>2</sub>) + &rho;*F</h2></center>

<form name="boxes" action="">

<div id="p1" name="p1">
P<sub>1</sub>:<input type="text" name="P1" size=3></div>

<div id="p2" name="p2" align="right">
P<sub>2</sub>:<input type="text" name="P2" size=3><br></div><br>

<div id="h1" name="h1">
h<sub>1</sub>:<input type-"text" name="h1" size=3></div>

<div id="h2" name="h2" align="right">
h<sub>2</sub>:<input type-"text" name="h2" size=3></div><br>

<div id="v1" name="v1">
V<sub>1</sub>:<input type-"text" name="V1" size=3></div>

<div id="v2" name="v2" align="right">
V<sub>2</sub>:<input type-"text" name="V2" size=3></div><br>

<div id="rho" name="rho" align="center">
&rho;:<input type="text" name="rho" size=3></div><br>

<div id="F" name="F" align="center">
F:<input type="text" name="F" size=3></div><br>

<div id="g" name="g" align="center">
g:<input type="text" name="g" size=3 value="9.8"></div><br>

<input type="button" onclick="calculate();" value="Calculate">
</form>


<script type="text/javascript" language="javascript" charset="utf-8">

function isEmpty(id) {
    var text = document,getElementById(id).value;
    if (!text.match(/\S/)){
        return true;
    }
    else{
        return false;
    }
}

function calculate(){

var p1 = parseInt(document.getElementById("p1").value);
var p2 = parseInt(document.getElementById("p2").value);
var h1 = parseInt(document.getElementById("h1").value);
var h2 = parseInt(document.getElementById("h2").vaule);
var v1 = parseInt(document.getElementById("v1").value);
var v2 = parseInt(document.getElementById("v2").value);
var rho = parseInt(document.getElementById("rho").value);
var F = parseInt(document.getElementById("F").value);
var g = parseInt(document.getElementById("g").value);


var Lside = p1+(rho*g*h1)+(rho*((v1^2)/2));
var Rside = p2+(rho*g*h2)+(rho*((v2^2)/2))+(rho*F);
var ans = 0;

    if (isEmpty(p1)){
        ans = Rside-(rho*((v1^2)/2))-(rho*g*h1);
        document.getElementById("p1").value = ans.toString();
   }
    else if (isEmpty(h1)){
        ans = (Rside-(rho*((v1^2)/2))-p1)/(rho*g);
        document.getElementById("h1").value = ans.toString();
    }
    else if (isEmpty(v1)){
        ans = (Rside-p1-(rho*g*h1))/rho;
        ans = ans*2;
        ans = Math.sqrt(ans);
        document.getElementById("v1").value = ans.toString();
    }
    else if (isEmpty(p2)){
        ans = Lside-(rho*((v2^2)/2))-(rho*g*h2)-(rho*F);
        document.getElementById("p2").value = ans.toString();
    }
    else if (isEmpty(h2)){
        ans = (Lside-(rho*((v2^2)/2))-(rho*F)-p2)/(rho*g);
        document.getElementById("h2").value = ans.toString();

    }
}

</script>




</body>
</html>

我正在尝试进行计算并将答案显示在文本框中。如果无法做到这一点，我还尝试在

中显示答案

标记，但这也不起作用。

目前的代码如下所示：http://jsfiddle.net/fCXMt/238/

它应该找到哪个文本字段留空，然后使用将给出的其他值进行计算以找到该值。

【问题讨论】：

    标签： javascript html input textfield


    【解决方案1】：

    快速浏览您的代码，分配的 id 分配给 div 而不是输入值本身。据我所见，您得到的 id 错误。 

    var p1 = parseInt(document.getElementById("p1").value);

    应该是

    var p1 = parseInt(document.getElementById("P1").value);//notice the capital.

    我还看到一些包含输入的 div 有 id，但输入字段本身没有。

    在第 76 行，您有一个错字 var text = document,getElementById(id).value; 应该是document.getElementById(id).value;

    【讨论】：

    • 它仍然无法工作，因为在这种情况下表单元素没有 ID，只有名称。不过，您走在正确的轨道上。需要更改 HTML 或者需要通过名称 document.forms[0].elements["P1"] 或类似名称引用元素。我已经很久没有按名称引用表单元素了，我已经忘记了如何。
    【解决方案2】：

    您的代码充满了错误。这是改正错误后的样子。

    Fiddle 上的演示

    （由于某种原因，前六个输入在小提琴上是不可点击的。因此，要获得这些输入的焦点，请单击结果窗口的左上角并按 Tab 键.)

    HTML：

    <div class="container">
  <h1><center><b>Bernoulli's Energy Balance</b></center></h1>
  <center>
    <h2>P<sub>1</sub> + &rho;*g*h<sub>1</sub> + &rho;*(<sup>V<sub>1</sub><sup>2</sup></sup>&frasl;<sub>2</sub>) = P<sub>2</sub> + &rho;*g*h<sub>2</sub> + &rho;*(<sup>V<sub>2</sub><sup>2</sup></sup>&frasl;<sub>2</sub>) + &rho;*F</h2>
  </center>
  <br />
  <div class="data">
    <form>
      <div class="left">P<sub>1</sub>:
        <input id="p1" type="text" size="3" />
      </div>
      <div class="right">P<sub>2</sub>:
        <input id="p2" type="text" size="3" />
      </div>
      <div class="left">h<sub>1</sub>:
        <input id="h1" type="text" size="3" />
      </div>
      <div class="right">h<sub>2</sub>:
        <input id="h2" type="text" size="3" />
      </div>
      <div class="left">V<sub>1</sub>:
        <input id="v1" type="text" size="3" />
      </div>
      <div class="right">V<sub>2</sub>:
        <input id="v2" type="text" size="3" />
      </div>
      <div class="center">&rho;:
        <input id="rho" type="text" size="3" />
      </div>
      <br />
      <div class="center">F:
        <input id="F" type="text" size="3" />
      </div>
      <br />
      <div class="center">g:
        <input id="g" type="text" size="3" value="9.8" />
      </div>
      <br />
        <input id="btn" type="button" value="Calculate" />
    </form>
  </div>
</div>

    JavaScript：

    function calculate() {
  var p1 = parseFloat(document.getElementById("p1").value, 10);
  var p2 = parseFloat(document.getElementById("p2").value, 10);
  var h1 = parseFloat(document.getElementById("h1").value, 10);
  var h2 = parseFloat(document.getElementById("h2").vaule, 10);
  var v1 = parseFloat(document.getElementById("v1").value, 10);
  var v2 = parseFloat(document.getElementById("v2").value, 10);
  var rho = parseFloat(document.getElementById("rho").value, 10);
  var F = parseFloat(document.getElementById("F").value, 10);
  var g = parseFloat(document.getElementById("g").value, 10);

  var Lside = p1 + (rho * g * h1) + (rho * ((v1 ^ 2) / 2));
  var Rside = p2 + (rho * g * h2) + (rho * ((v2 ^ 2) / 2)) + (rho * F);
  var ans;

  if (!p1) {
    ans = Rside - (rho * ((v1 ^ 2) / 2)) - (rho * g * h1);
    document.getElementById("p1").value = Math.round(ans * 100) / 100;
  } else if (!h1) {
    ans = (Rside - (rho * ((v1 ^ 2) / 2)) - p1) / (rho * g);
    document.getElementById("h1").value = Math.round(ans * 100) / 100;
  } else if (!v1) {
    ans = (Rside - p1 - (rho * g * h1)) / rho;
    ans = ans * 2;
    ans = Math.sqrt(ans);
    document.getElementById("v1").value = Math.round(ans * 100) / 100;
  } else if (!p2) {
    ans = Lside - (rho * ((v2 ^ 2) / 2)) - (rho * g * h2) - (rho * F);
    document.getElementById("p2").value = Math.round(ans * 100) / 100;
  } else if (!h2) {
    ans = (Lside - (rho * ((v2 ^ 2) / 2)) - (rho * F) - p2) / (rho * g);
    document.getElementById('h2').value = Math.round(ans * 100) / 100;
  }
}
var btn = document.getElementById('btn');
btn.onclick = calculate;

    CSS：

    .container {
    text-align: center;
}
.data {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.left {
    text-align: left;
}
.right {
    position: relative;
    top: -20px;
    text-align: right;
}

    【讨论】：

    • .right div 与.left 重叠，使.right 中的任何输入都不可点击。 z-index 或更好地使用 CSS 进行布局可以修复它（浮现在脑海中的是浮动或内联块）
    猜你喜欢
    • 2015-07-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-28
    • 1970-01-01
    • 2014-10-26
    • 2012-01-02
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode