javascript getElementsByClassName更改文本字段的值
我试图使所有具有特定类名的文本字段的值相互更新,我的意思是,如果您有两个class=“a”文本字段,并且我在一个文本字段中键入一些内容,那么另一个将使用我键入的内容进行更新。这是我的代码:javascript getElementsByClassName更改文本字段的值,javascript,Javascript,我试图使所有具有特定类名的文本字段的值相互更新,我的意思是,如果您有两个class=“a”文本字段,并且我在一个文本字段中键入一些内容,那么另一个将使用我键入的内容进行更新。这是我的代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript'> function run() { var e
<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>
函数运行()
{
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(“速度”);
var gc=document.getElementById(“重力系数”)
函数类更新(类,changedId)
{
var x=document.getElementsByClassName(类);
var temp=x[changedId].值;
对于(var i=0;i
质量守恒
能量守恒
乘X
我做错了什么
谢谢。您不能以相同的方式处理getElementById和GetElementsByCassName的返回值。另一个是单个项,另一个是必须迭代的集合 代码中还存在多个其他问题。一个是使用如下构造:
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;
}
}
函数类更新(类名,changedElem)
{
var x=document.getElementsByClassName(className);
var temp=变更的DELEM.value;
对于(var i=0;i
不能以相同的方式处理getElementById和GetElementsByCassName的返回值。另一个是单个项,另一个是必须迭代的集合
代码中还存在多个其他问题。一个是使用如下构造:
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;
}
}
函数类更新(类名,changedElem)
{
var x=document.getElementsByClassName(className);
var temp=变更的DELEM.value;
对于(var i=0;i
函数类更新(类名,changedId)
{
var x=document.getElementsByClassName(className);
var temp=x[changedId].值;
对于(var i=0;i
我会将类var更新为className,因为“class”是一个保留字。函数classUpdate(className,changedId)
{
var x=document.getElementsByClassName(className);
var temp=x[changedId].值;
对于(var i=0;i
我会将类var更新为className,因为“class”是一个保留字。我知道这已经很旧了,但我找不到一个好的替代答案,它可以简化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];}}};
等访问相关的值,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
这对于在构建一个项目时降低开销非常有用,在这个项目中,你最好拥有自己的精益框架,而不是一个充满好东西的框架,虽然很好,但对项目没有任何意义,只是在带宽方面的浪费。我知道这很旧,但我找不到一个好的替代答案允许工具速记ID(document.getElementById)和类(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];}}};
等访问相关的值,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
这对于在构建一个项目时降低开销非常有用,在这个项目中,你最好拥有自己的精益框架,而不是一个充满好东西的框架,虽然很好,但对项目没有任何意义,只是在带宽方面浪费。我说的是classUpdate(),另一部分是