2

特定のクラス名を持つすべてのテキスト フィールドの値を相互に更新しようとしています。つまり、class="a" の 2 つのテキスト フィールドがあり、1 つのテキスト フィールドに何かを入力し、もう 1 つのテキスト フィールドに何かを入力するとします。私が入力したもので更新されます。これは私のコードです:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type='text/javascript'>
        function run()
        {
            var eq     = document.getElementById("Energyq");
            var m      = document.getElementsByClassName("mass");
            var cHeat  = document.getElementById("cHeat");
            var dT     = document.getElementById("deltaTemprature");
            var ek     = document.getElementById("Energyk");
            var v      = document.getElementById("velocity");
            var gc     = document.getElementById("gravityCoefficient")

        function classUpdate(class, changedId)
        {
            var x = document.getElementsByClassName(class);
            var temp = x[changedId].value;
            for(var i = 0; i < x.length; i++) { 
                x[i].value = temp.value;
            }
        }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Welcome</title>
</head>
<body>
    <form action="">
        <table style="font-weight: bold; font-size: 35px" border="10">
            <tr style="text-align: center">
                <td>Eq</td><td> = </td><td>m<td> * </td></td><td>c<td> * </td></td><td>ΔT</td>
            </tr>
            <tr style="text-align: center">
                <td><input type="number" type="number" style="max-width: 105px" id="Energyq" class="energy" /></td><td> = </td><td><input type="number" style="max-width: 105px"  max="10" class="mass" id="mass1" onkeyup="classUpdate("mass",1)" onchange="classUpdate("mass",1)" /></td><td> * </td><td><input type="number" style="max-width: 105px" id="cHeat"  /></td><td> * </td><td><input type="number" style="max-width: 105px" id="deltaTemprature"  /></td>
            </tr>
            <tr>
                <td style="text-align: center">Ek</td><td style="text-align: center"> = </td><td style="text-align: left">(m</td><td style="text-align: center">*</td><td style="text-align: right">v² )</td><td style="text-align: center"> /</td><td style="text-align: center"> 2</td>
            </tr>
            <tr style="text-align: center">
                <td><input type="number" style="max-width: 105px" id="Energyk" class="energy" /></td><td> = </td><td>(<input type="number" style="max-width: 105px" max="10" class="mass" id="mass2" h="10" onkeyup="classUpdate("mass",2)" onchange="classUpdate("mass",2)" /></td><td> * </td><td><input type="number" style="max-width: 105px" id="velocity"  /><font size="6.5">²</font> )</td><td> /</td><td> 2</td>
            </tr>
            <tr style="text-align: center">
                <td>Eh</td><td> = </td><td>m</td><td> * </td><td>g</td><td> * </td><td>h</td>
            </tr>
            <tr style="text-align: center">
                <td><input type="number" style="max-width: 105px" id="Energyh" class="energy"  /></td><td> = </td><td><input type="number" style="max-width: 105px" max="10" class="mass" id="mass3"  onkeyup="classUpdate("mass",3)" onchange="classUpdate("mass",3)" /></td><td> * </td><td><input type="number" style="max-width: 105px" id="gravitatinalCoefficient"  /></td><td> * </td><td><input type="number" style="max-width: 105px" id="height"  /></td>
            </tr>
        <br />
        </table>
        <label><input type="checkbox" id="massConservation" /> Conservation of mass</label> 
        <br />
        <label><input type="checkbox" id="energyConservation" /> Conservation of energy</label> 
        <br />
        <br />
        <input type="reset" /> <input type="button" onclick="run()" value="Calculate" />

        <h6>by X</h6>
    </form>
</body>
</html>

私は何を間違っていますか？

ありがとう。

4

3 に答える 3

4

getElementById と getElementsByClassName の戻り値を同じ方法で処理することはできません。その他は単一のアイテムであり、その他は反復する必要があるコレクションです。

コードには他にも複数の問題があります。1 つは、次のような構成を使用することです。

onkeyup="classUpdate("mass",1)"

引用符の問題により機能しません。次のようにする必要があります

onkeyup="classUpdate('mass',1)"

また、あなたは持っています

        var temp = changedElem.value;
        ...
            x[i].value = temp.value;

という名前のプロパティがなく、単純な変数としてtempは機能しませんvalue。

あなたが本当に望むかもしれないのは

onkeyup="classUpdate('mass', this)"

そして、次のような関数

    function classUpdate(className, changedElem)
    {
        var x = document.getElementsByClassName(className);
        var temp = changedElem.value;
        for(var i = 0; i < x.length; i++) { 
            x[i].value = temp;
        }
    }
于 2013-05-01T20:05:06.163 に答える
0 
function classUpdate(className, changedId)
{
    var x = document.getElementsByClassName(className);
    var temp = x[changedId].value;
    for(var i = 0; i < x.length; i++) { 
        x[i].value = temp.value;
    }
}

「class」は予約語であるため、class var を className に更新します。

于 2013-05-01T20:09:04.507 に答える
0

私はこれがかなり古いことを知っていますが、ID (document.getElementById) と CLASS (document.getElementsByClassName) を短縮する機能を可能にする適切な代替回答を見つけることができませんでした。

jquery や別のプラグインを使用するのではなく、ライト バージョンを実装する必要がありました (テスト サイトはこちらで確認できます。Javascript はアプリケーションのブラウザーで確認できます。

var $=function(a,b,c){b=a.substr(1);if(a.includes("#")){return document.getElementById(b);}else{c=document.getElementsByClassName(b);for(var i=0;i<c.length;i++){return c[i];}}};

その後、次のように簡単に使用できます。

b=$("#a").value; $("#za").innerHTML=a

関連する値、html などにアクセスするためのなど。明らかに、追加の短縮形を使用してこれを引き締めることができますが、アプローチの理解を容易にするために、このように残しました。

以下を使用して、独自の縮小ライブラリ用にこれをさらに拡張できます。

function $v(a){return $(a).value;}
function $i(a){return $(a).innerHTML;}

許可:

b=$("#a").value; $("#za").innerHTML=a

なる：

b=$v("#a");$i("#za")=a;

これは、プロジェクトを構築する際にオーバーヘッドを抑えるのに非常に役立ちます。独自の無駄のないフレームワークを使用する方がよい場合は、素晴らしいものではありますが、プロジェクトには何の役にも立たず、帯域幅の点で無駄になるだけです。

于 2020-08-12T08:02:15.317 に答える