2

我正在尝试使具有某个类名的所有文本字段的值相互更新，我的意思是，如果您有 2 个带有 class="a" 的文本字段，并且我在一个文本字段中输入一些内容，另一个将更新我输入的内容。这是我的代码：

<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 的返回值。其他是单个项目，其他是您必须遍历的集合。

您的代码中还有多个其他问题。一种是使用这样的构造：

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 var 更新为 className，因为“class”是保留字。

于 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 回答