Question

我遇到了一个问题，即onkeyup在带有数字的ID中不起作用。例如，id =＆＃34; lname1＆＃34;。

此代码有效：

<html>
<body>
 Enter your firstname: <input type="text" id="fname" 
 onkeyup="myFunction('fname')">
 <br/>Enter your lastname: <input type="text" id="lname" 
 onkeyup="myFunction('lname')">
 <p>My name is: <span id="demo"></span></p>

 <script>
 function myFunction(ele) {
     var x = document.getElementById(ele).value;
     document.getElementById("demo").innerHTML = x;
 }
 </script>

 </body>
 </html>

但是，当我将id更改为fname1或lname1时，onkeyup无效。

以下是代码：

<html>
<body>
 Enter your firstname: <input type="text" id="fname" 
 onkeyup="myFunction('fname1')">
 <br/>Enter your lastname: <input type="text" id="lname" 
 onkeyup="myFunction('lname1')">
 <p>My name is: <span id="demo"></span></p>

 <script>
 function myFunction(ele) {
     var x = document.getElementById(ele).value;
     document.getElementById("demo").innerHTML = x;
 }
 </script>

 </body>
 </html>

这个例子不起作用。为什么？顺便说一句，id有数字的原因是因为我动态创建它们。有人可以向我解释一下吗？提前谢谢。

Answer 1

为什么？

因为您已经更改了它所寻找的ID（例如，从fname到fname1），但您还没有更改了元素的id属性（您仍然有id="fname"）。

根本不需要id，只需将this传递到您的处理程序并移除对getElementById的调用：

<html> <body> Enter your firstname: <input type="text" onkeyup="myFunction(this)"> <br/>Enter your lastname: <input type="text" onkeyup="myFunction(this)"> <p>My name is: <span id="demo"></span></p> <script> function myFunction(ele) { var x = ele.value; document.getElementById("demo").innerHTML = x; } </script> </body> </html>

实时复制：

＆＃13;
＆＃13;
function myFunction(ele) { var x = ele.value; document.getElementById("demo").innerHTML = x; }
＆＃13;
Enter your firstname: <input type="text" onkeyup="myFunction(this)"> <br/>Enter your lastname: <input type="text" onkeyup="myFunction(this)"> <p>My name is: <span id="demo"></span></p>
＆＃13;
＆＃13;
＆＃13;

正如Terry在评论中指出的那样，您可能希望定位不同的输出元素，因为输入任一输入都会将输入的值放入 demo元素。也许将目标元素的ID作为参数传递并且具有多个：

＆＃13;
＆＃13;
function myFunction(ele, id) { document.getElementById(id).innerHTML = ele.value; }
＆＃13;
Enter your firstname: <input type="text" onkeyup="myFunction(this, 'fnameOutput')"> <br/>Enter your lastname: <input type="text" onkeyup="myFunction(this, 'lnameOutput')"> <p> My name is: <span id="fnameOutput"></span> <span id="lnameOutput"></span> </p>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您根本不需要传递名称。只需通过this即可。要保留以前的名称，您必须使用+=而不是=：

＆＃13;

function myFunction(ele) {
   var x = ele.value;
   document.getElementById("demo").innerHTML += x;
}

＆＃13;

Enter your firstname: <input type="text" id="fname" 
onkeyup="myFunction(this)">
<br/>Enter your lastname: <input type="text" id="lname" 
onkeyup="myFunction(this)">
<p>My name is: <span id="demo"></span></p>

＆＃13;

onkeyup并没有使用带有数字的ID

2 个答案: