Question

所有

下面是使用用户输入的输入更新字段的简单代码。但是，更新没有发生。谁能告诉我这里的问题呢？

<html>
   <head>
      <title>Rooms</title>
      <script type="text/javascript">
         function populate()
         {
            var newName = document.getElementsByName("roomNameInput").value;
            document.getElementsByName("nameDisplay").value = newName;
         }
      </script>
   </head>
   <body>
      <h3>Configure: </h3><i name="nameDisplay"></i><br />
      Enter the Room name: <input type="text" name="roomNameInput" onkeypress="populate()"><br />
   </body>
</html>

尝试使用document.getElementsByName("nameDisplay").innerHTML但未通过

Answer 1

nameDisplay不是输入，因此您必须通过设置innerHTML属性而不是value来更改其内容。同样getElementsByName也不会在那里工作，您必须将id设置为nameDisplay，然后使用getElementById

<i id="nameDisplay"></i>

...

document.getElementById("nameDisplay").innerHTML = newName;

getElementsByName将返回一个元素数组，因此您必须选择第一个元素来获取值：

var newName = document.getElementsByName("roomNameInput").value;

您还可以设置id的{{1}}值并使用input进行选择。

为了简化操作，请使用jQuery框架：

getElementById

Answer 2

document.getElementsById()返回一个元素数组，因此快速修复将执行以下操作：

var newName = document.getElementsByName("roomNameInput")[0].value;
document.getElementsByName("nameDisplay")[0].innerHTML = newName;

更好的解决方案是将name属性替换为id，并将<i>替换为<em>（因为它不再是标准的）：

<em id="nameDisplay"></em>
<input type="text" id="roomNameInput" onkeypress="populate()" />

然后切换你的JS：

var newName = document.getElementById("roomNameInput").value;
document.getElementById("nameDisplay")[0].innerHTML = newName;

Answer 3

HTML应该是这个

<h3>Configure: </h3>
       <em id="nameDisplay"></em><br />
      Enter the Room name: <input id="roomNameInput" type="text" onkeyup="populate()"><br />

Javascript应该是这样的：

var populate = function(){
    var a = document.getElementById('roomNameInput').value;
    document.getElementById('nameDisplay').innerHTML = a; 
}

工作小提琴http://jsfiddle.net/DarkThrone/B5LP7/

Answer 4

也许你可以尝试改变：

document.getElementByName("nameDisplay").value = newName;

到

document.getElementByName("nameDisplay").innerHTML = newName;

但是，如果我可以建议，击球就像：在HTML中：

<h3>Configure: </h3><span id="nameDisplay"></span><br />

然后
在Javascript：

document.getElementById("nameDisplay").innerHTML = "<i>"+newName+"</i>";

Javascript更新失败

4 个答案: