Making 2 text values show up within 1 list item

- 1 answer

Ad

Okay, I'm having trouble making two text values showing up within the same list item (one <input>, one <textarea>) Is this possible?

I'm trying to create a simple diary/log application, in which you can add a title (optional) and the content of the post entry itself, press submit and have it create a list item displaying the content.

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 (ignore angular login stuff)

Ad

Answer

Ad

Here is some javascript

//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,
   header= document.getElementById('title').value,
      li = document.createElement('li'),
      content=document.createElement('div'),
      title=document.createElement('div'),
     // textNode = document.createTextNode(inputText + ''+),
      removeButton = document.createElement('button');
			content.setAttribute('class','content')
      title.setAttribute('class','title')
      content.innerHTML=inputText;
      title.innerHTML=header;
  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(title);
  li.appendChild(content);
  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 = '';
};
body {
  margin: 0;
}
*{
  font-family: Gotham Book, Arial, Helvetica, Sans-serif;
}
#navbar {
  background-color: #f1f1f1;
  text-align: center;
}
#navbaritems {
  margin: 0 auto;
}
#navbaritems ul {
  padding: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  display: inline;
  position: relative;
  font-size: 0;
}
#navbaritems ul li {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  color: #000;
  position: relative;
}
#navbaritems ul li ul {
  width: 100%;
  padding: 0;
  position: absolute;
  top: 6vh;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#navbaritems ul li ul li {
  background-color: #f1f1f1;
  display: block;
}
#navbaritems ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
#navbaritems ul li:hover {
  -o-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  width: 22%;
}
#navbaritems ul li ul li:hover {
  -o-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  width: 100%;
}
#navbaritems ul li a {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-size: 1vw;
  display: block;
  height: 4vh;
  line-height: 4vh;
  color: #808080;
  text-decoration: none;
  padding: 1vh;
  margin: 0;
}
#navbaritems ul li a:hover:not(.active) {
  background-color: #82c986;
  color: #ffffff;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  cursor: pointer;
  display: block;
}
#navbaritems ul li a.active {
  color: #ffffff;
  background-color: #4CAF50;
}
.title {
  display:inline-block;
 color:blue;
 font-weight:bold;
 text-decoration:underline;
}
    <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>

Ad
source: stackoverflow.com
Ad