【发布时间】:2016-03-30 12:22:18
【问题描述】:
好的,我无法在同一个列表项中显示两个文本值(一个<input>,一个<textarea>)这可能吗?
我正在尝试创建一个简单的日记/日志应用程序,您可以在其中添加标题(可选)和帖子条目本身的内容,按提交并让它创建一个显示内容的列表项。
HTML:
<html>
<head>
<title>WriteUp</title>
</head>
<body>
<div id="textWrap">
<div class="border">
<h1>Start Writing</h1><br />
<input id="title" placeholder="Title (Optional)">
<textarea rows="4" cols="50" type="text" id="entry" maxlength="500" placeholder="Add stuff..."></textarea><br />
<button id="add">Submit</button>
<button id="removeAll">Remove All</button>
<ul id="list"></ul>
</div><!--end of border div-->
</div><!--end of textWrap-->
</body>
</html>
JS:
//js to add text entries
var ul = document.getElementById('list'),
removeAll = document.getElementById('removeAll'),
add = document.getElementById('add');
//make something happen when clicking on 'submit'
add.onclick = function(){
addLi(ul);
document.getElementById("titleHead");
};
//function for adding items
function addLi(targetUl){
var inputText = document.getElementById('entry').value,
li = document.createElement('li'),
textNode = document.createTextNode(inputText + ''),
removeButton = document.createElement('button');
if (inputText.split(' ').join(' ').length === 0) {
//check for empty inputs
alert ('No input');
return false;
}
removeButton.className = 'removeMe'; //add class to button for CSS
removeButton.innerHTML = 'Remove'; //add text to the remove button
removeButton.setAttribute('onclick', 'removeMe(this);');
li.appendChild(textNode);
li.appendChild(removeButton);
targetUl.appendChild(li);
}
//function to remove entries
function removeMe(item){
var parent = item.parentElement;
parent.parentElement.removeChild(parent);
}
removeAll.onclick = function(){
ul.innerHTML = '';
};
演示:http://codepen.io/Zancrash/pen/rxMxxQ(忽略 Angular 登录内容)
【问题讨论】:
标签: javascript jquery html css angularjs