单击提交后从文本框中获取要显示的项目
单击提交后从文本框中获取要显示的项目
提问于 2017-02-01 11:52:05
我正在尝试获取我在文本框中键入的信息，以便在浏览器的代码中显示在无序列表中。我还试图让它显示一条消息后，我输入了5个项目。请看我下面的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 3-4</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 3-4
</h1>
</header>
<article>
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form>
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox" />
</fieldset>
<fieldset>
<button type="button" id="button">Submit</button>
</fieldset>
</form>
</article>
<script>
var i = 1;
var listItem = "";
function processInput() {
if (i <= 5) {
listIem = document.getElementById("item" + i).innerHTML = i;
}
}
if (window.addEventListener) {
window.addEventListener("click", processInput, false);
} else if (window.attachEvent) {
window.attachEvent("onclick", processInput);
}
</script>
</body>
</html>回答 1
Stack Overflow用户
发布于 2017-02-01 11:58:33
这一点：
function processInput() {
if (i <= 5) {
listIem = document.getElementById("item" + i).innerHTML = i;
}
}应该是这样：
function processInput() {
if (i <= 5) {
document.getElementById("item" + i).textContent = document.getElementById("toolBox").value;
i++; // increment i here
}
}或者这样(如果你想把东西分开)：
function processInput() {
if (i <= 5) {
var listItem = document.getElementById("item" + i);
var input = document.getElementById("toolBox");
listItem.textContent = input.value;
i++; // increment i here
}
}使用.textContent而不是.innerHTML，并使用.vlaue获取#toolBox输入值。
注意：如果你能动态生成列表项就更好了(检查here是如何生成的)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41971591
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号