1

我有一个包含两个公式的页面。每个人都有自己的输入形式等。他们都在按键时调用相同的Javascript函数。

只有第一个有效，我有点理解为什么但我找不到解决方案，我对 Javascript 太陌生，不知道如何解决这个问题。我不能大量更改 JS 文件的结构，因为其他页面上的其他方程式取决于此设置。

有解决方法吗？

缩短的 HTML：

 <div id="formula">

<p>To find &rho;<sub>b</sub>:</p>
        <form id="formula" name="formula">

            <input type="hidden" id="formulaName" name="formulaName" value="porosityRhob"/>

            <div>
                <label>$\rho_{fl}$:</label>
               <input type ="text" name="input" id="input" onkeyup="calculatePEFormula()"/>
            </div>
            <div>
                <label>Result:</label>
                <input type="text" id="result" name="result">
            </div>

        </form>
    </div>

    <br/>
    <div id="formula">

        <p>To find &Phi;:</p>
        <form id="formula" name="formula">

            <input type="hidden" id="formulaName" name="formulaName" value="porosityPhi"/>

            <div>
                <label>$\rho_{ma}$:</label>
                <input type ="text" name="input" id="input" onkeyup="calculatePEFormula()"/>
            </div>
            <div>
                <label>Result:</label>
                <input type="text" id="result" name="result">
            </div>

        </form>
    </div>

JS：

function PEFormula(result, formulaName){
this.result = result;
this.formulaName = formulaName;
}

function calculatePEFormula(){

var PEObject = new PEFormula($("#result"), $("#formulaName"));
var formulaName = $("#formulaName").val();

switch(formulaName){

    case "porosityRhob" : PEObject.porosityRhoB();
        break;
    case "porosityPhi" : PEObject.porosityPhi();
        break;
}
PEFormula.prototype.porosityPhi = function(){

var input = parseFloat($("#input").val());
//logic
return r;
}
4

4 回答 4

1

HTML 属性 id 应该是唯一的

  1. <div id="formula">
  2. <form id="formula" name="formula">
  3. <input type="hidden" id="formulaName" name="formulaName" value="porosityRhob"/>
  4. <input type ="text" name="input" id="input" onkeyup="calculatePEFormula()"/>
  5. <input type="text" id="result" name="result">

尝试更改这些 ID，而不是使用类

这是解决方案将所有字段ID更改为类和表单ID应该不同，并将表单的参数ID作为参数传递onkeyup="calculatePEFormula('form#formula1')"，onkeyup="calculatePEFormula('form#formula2')"现在在js中

function PEFormula(result, formulaName){
this.result = result;
this.formulaName = formulaName;
}

function calculatePEFormula(form_id){

var PEObject = new PEFormula($(form_id+"  .result"), $(form_id+"  .formulaName"));
var formulaName = $(form_id+"  .formulaName").val();

switch(formulaName){

    case "porosityRhob" : PEObject.porosityRhoB();
        break;
    case "porosityPhi" : PEObject.porosityPhi();
        break;
}
PEFormula.prototype.porosityPhi = function(){

var input = parseFloat($(form_id+"  .input").val()); //provide the form id here
//logic
return r;
}
于 2013-08-13T11:30:14.880 回答
0

您需要避免将相同的id属性分配给多个元素。元素的 ID 应该是唯一的。

于 2013-08-13T11:30:59.170 回答
0

当您应该使用类时，您正在使用 ID。

于 2013-08-13T11:30:26.723 回答
0

切勿对多个元素使用相同的 id。这是 HTML 中的一个基本概念。标识应该是唯一且相同的。因此，任何 HTML 页面中都不能有任何重复的 ID。所以请更改第二种形式的ID，

<div id="formula2">

        <p>To find &Phi;:</p>
        <form id="formula2" name="formula">

            <input type="hidden" id="formulaName2" name="formulaName" value="porosityPhi"/>

            <div>
                <label>$\rho_{ma}$:</label>
                <input type ="text" name="input" id="input2" onkeyup="calculatePEFormula()"/>
            </div>
            <div>
                <label>Result:</label>
                <input type="text" id="result2" name="result">
            </div>

        </form>
    </div>

调用相同的 js 函数时相应地更改 ID。

我通过在每个 ID 的末尾添加 2 来重命名所有 ID。使每个 ID 都独一无二。

于 2013-08-13T11:35:50.220 回答