javascript getElementsByClassName更改文本字段的值
我试图使具有某个类名称的所有文本字段的值相互更新,我的意思是,如果您有2个类=“a”的文本字段,并且我在一个文本字段中键入内容,另一个将更新我输入的内容。这是我的代码:javascript getElementsByClassName更改文本字段的值
<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>
我在做什么错了?
谢谢。
您不能以同样的方式处理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;
}
}
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;
}
}
功能我会更新类变种,以类名,因为 “一流” 是一个保留字。
嗯......没有改变结果......什么也没有发生。 – user2338361 2013-05-01 20:12:40
我很困惑你想要做什么,但在我的浏览器中,我得到一个错误传递给ClassUpdate函数的参数。我将代码更新为单引号,并得到它以响应classUpdate('mass',2) – Fabi 2013-05-01 20:17:24
它确实现在做出了响应,但由于某种原因它删除了文本(在Chrome中),并且在Firefox中文本中显示“未定义”领域。所以它会更新它们,但不正确。 – user2338361 2013-05-01 20:41:27
我说的是classUpdate(),代码的其他部分还没有准备好,我在那里迭代它。 – user2338361 2013-05-01 20:06:10
@ user2338361为什么不编辑问题,然后只包含您认为已准备就绪的部分,与问题相关并且存在问题。目前还不清楚你遇到了什么问题。 – eis 2013-05-01 20:08:07
完成............ – user2338361 2013-05-01 20:15:57