1

私は2つの式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をパラメーターとして渡し、JSonkeyup="calculatePEFormula('form#formula1')"でonkeyup="calculatePEFormula('form#formula2')"今すぐ渡すソリューションは次のとおりです

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 を使用しないでください。これは HTML の基本概念です。ID は一意かつ同一である必要があります。そのため、HTML ページ内で ID が重複することはありません。2ndフォームの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 に答える
0

クラスを使用する必要があるときにIDを使用しています。

于 2013-08-13T11:30:26.723 に答える
0

id複数の要素に同じ属性を割り当てないようにする必要があります。要素の ID は一意である必要があります。

于 2013-08-13T11:30:59.170 に答える