我正在尝试使具有特定类名称的所有文本字段的值相互更新，我的意思是，如果您有 2 个带有 class="a" 的文本字段，并且我在一个文本字段中输入一些内容，在另一个文本字段中输入一些内容一个将更新我输入的内容。这是我的代码：
\n\n<html xmlns="http://www.w3.org/1999/xhtml">\n<head>\n <script type=\'text/javascript\'>\n function run()\n {\n var eq = document.getElementById("Energyq");\n var m = document.getElementsByClassName("mass");\n var cHeat = document.getElementById("cHeat");\n var dT = document.getElementById("deltaTemprature");\n var ek = document.getElementById("Energyk");\n var v = document.getElementById("velocity");\n var gc = document.getElementById("gravityCoefficient")\n\n function classUpdate(class, changedId)\n {\n var x = document.getElementsByClassName(class);\n var temp = x[changedId].value;\n for(var i = 0; i < x.length; i++) { \n x[i].value = temp.value;\n }\n }\n </script>\n <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\n <title>Welcome</title>\n</head>\n<body>\n <form action="">\n <table style="font-weight: bold; font-size: 35px" border="10">\n <tr style="text-align: center">\n <td>Eq</td><td> = </td><td>m<td> * </td></td><td>c<td> * </td></td><td>\xce\x94T</td>\n </tr>\n <tr style="text-align: center">\n <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>\n </tr>\n <tr>\n <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\xc2\xb2 )</td><td style="text-align: center"> /</td><td style="text-align: center"> 2</td>\n </tr>\n <tr style="text-align: center">\n <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">\xc2\xb2</font> )</td><td> /</td><td> 2</td>\n </tr>\n <tr style="text-align: center">\n <td>Eh</td><td> = </td><td>m</td><td> * </td><td>g</td><td> * </td><td>h</td>\n </tr>\n <tr style="text-align: center">\n <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>\n </tr>\n <br />\n </table>\n <label><input type="checkbox" id="massConservation" /> Conservation of mass</label> \n <br />\n <label><input type="checkbox" id="energyConservation" /> Conservation of energy</label> \n <br />\n <br />\n <input type="reset" /> <input type="button" onclick="run()" value="Calculate" />\n\n <h6>by X</h6>\n </form>\n</body>\n</html>\n我究竟做错了什么？
\n\n谢谢。
\n您不能以相同的方式处理 getElementById 和 getElementsByClassName 的返回值。other 是单个项目，other 是您必须迭代的集合。
您的代码中还存在多个其他问题。一种是使用这样的构造：
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;
}
}
| 归档时间： |
|
| 查看次数： |
19399 次 |
| 最近记录： |