javascript getElementsByClassName 更改文本字段的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16325554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript getElementsByClassName change value of text fields
提问by user2338361
I'm trying to make the values of all the text fields with a certain class name update each other, I mean, if you have 2 text fields with class="a", and I type something in one text field, the other one will update with what I typed. This is my code:
我正在尝试使具有某个类名的所有文本字段的值相互更新，我的意思是，如果您有 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">v2 )</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">2</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>
What am I doing wrong?
我究竟做错了什么？
Thanks.
谢谢。
回答by eis
You cannot handle return value of getElementById and getElementsByClassName the same way. Other is a single item, other is a collection that you have to iterate through.
您不能以相同的方式处理 getElementById 和 getElementsByClassName 的返回值。其他是单个项目，其他是您必须迭代的集合。
There are multiple other problems in your code as well. One is to use a construct like this:
您的代码中还有多个其他问题。一种是使用这样的构造：
onkeyup="classUpdate("mass",1)"
which will not work due to problem with quotes, you need to have it like
由于引号问题而无法正常工作，您需要像
onkeyup="classUpdate('mass',1)"
also, you have
还有，你有
var temp = changedElem.value;
...
x[i].value = temp.value;
which will not work as tempis a simple variable, it does not have a property named value.
它不会像temp一个简单的变量那样工作，它没有名为value.
What you really might want is
你真正想要的是
onkeyup="classUpdate('mass', this)"
and then a function like
然后是一个函数
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;
}
}
回答by Fabi
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;
}
}
I would update the class var to className, since "class" is a reserved word.
我会将类 var 更新为 className，因为“class”是保留字。
