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

时间：2014-10-16 00:18:08

标签： javascript html input textfield

我没有多少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/

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

2 个答案:

答案 0 :(得分：0)

快速浏览您的代码，已分配的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;

答案 1 :(得分：0)

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

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;
}
相关问题
最新问题