Question

我正在尝试使具有某个类名的所有文本字段的值互相更新，我的意思是，如果您有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>

我做错了什么？

感谢。

Answer 1

您无法以相同的方式处理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;
        }
    }

Answer 2

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;
    }
}

我会将类var更新为className，因为“class”是一个保留字。

Answer 3

我知道这已经很老了，但是我找不到一个好的替代答案，该答案允许使用设施来简化ID（document.getElementById）和CLASS（document.getElementsByClassName）。

我需要实现一个轻量级版本，而不是使用jquery或其他插件（您可以看到测试站点here，可以在浏览器中查看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

etc可以访问相关的值，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;

在构建项目时，这对于降低开销非常有用，在该项目中，最好是拥有自己的精益框架，而不是充斥着好东西，尽管这很好，但对项目没有任何意义，只是浪费了流行。

javascript getElementsByClassName更改文本字段的值

3 个答案: