因此,我试图打印一个数组,将用户输入文本添加到其中,但我想要打印的是数组的有序列表。正如您所看到的,(如果您运行我的代码)列表项只是不断将用户输入添加到其中,并且不会添加带有人员姓名的新列表项。
下面是代码:
<!DOCTYPE html>
<html>
<head>
First name: <input type="text" id="firstname"><br>
<script type="text/javascript">
var x= [];
function changeText2(){
var firstname = document.getElementById('firstname').value;
document.getElementById('boldStuff2').innerHTML = firstname;
x.push(firstname);
document.getElementById('demo').innerHTML = x;
}
</script>
<p>Your first name is: <b id='boldStuff2'></b> </p>
<p> Other people's names: </p>
<ol>
<li id = "demo"> </li>
</ol>
<input type='button' onclick='changeText2()' value='Submit'/>
</head>
<body>
</body>
</html>
If you want to create a li
element for each input/name, then you have to create it, with document.createElement [MDN] https://developer.mozilla.org/en-US/docs/Web/API/document.createElement.
为列表指定 ID:
<ol id="demo"></ol>
并获取对其的引用:
var list = document.getElementById('demo');
In your event handler, create a new list element with the input value as content and append to the list with Node.appendChild [MDN] https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild:
var firstname = document.getElementById('firstname').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstname));
list.appendChild(entry);
DEMO http://jsfiddle.net/Gmyag/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)