Ok, ho problemi a visualizzare due valori di testo visualizzati all'interno della stessa voce di elenco (uno <input>
, uno <textarea>
) È possibile?Visualizzazione di 2 valori di testo all'interno di 1 voce di elenco
Sto provando a creare un semplice diario/applicazione di registro, in cui è possibile aggiungere un titolo (facoltativo) e il contenuto dell'inserimento stesso, premere Invia e farlo creare un elemento di elenco che visualizza il contenuto.
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 = '';
};
demo: http://codepen.io/Zancrash/pen/rxMxxQ (ignora roba login angolare)