【问题标题】:Making 2 text values show up within 1 list item使 2 个文本值显示在 1 个列表项中
【发布时间】: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


    【解决方案1】:

    我很确定这就是您要查找的内容,我稍微修改了以textNode 开头的行,并为titleText 添加了额外的变量。然后继续按原样处理所有其余代码。

    function addLi(targetUl){
      var inputText = document.getElementById('entry').value,
          titleText =  document.getElementById('title').value,
          li = document.createElement('li'),
          textNode = document.createTextNode(titleText + ' - ' + inputText + ''),
          removeButton = document.createElement('button');
    

    【讨论】:

      【解决方案2】:

      您可以简单地访问表单值,然后将它们连接起来

      ;(function(){
        
        "use strict";
        
        var form = document.getElementById('f');
        var title = document.getElementById('title');
        var body = document.getElementById('body');
        var targetUl = document.getElementById('posts');
        
        btn.addEventListener('click',function(ev){
      
          var newli = document.createElement('li');
          newli.innerText = title.value + ' && ' + body.value;
          targetUl.appendChild(newli);
          
        });
        
      })();
      form {
        position: relative;
      }
      label, input, textarea, button {
        float: left;
      }
      label {
        clear: left;
      }
      input, textarea {
        clear: right;
      }
      button, ul, hr {
        clear: both;
      }
      label {
        width: 100px;
      }
      <form id="f">
        <label for="title">Title</label>
        <input type="text" name="title" id="title" />
        <label for="body">Body</label>
        <textarea name="body" id="body"></textarea>
        <button type="button" id="btn">add to list</button>
      </form>
      
      <hr />
      
      <ul id="posts" />

      【讨论】:

        【解决方案3】:

        这里有一些 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>

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2020-07-25
          • 1970-01-01
          • 2012-11-26
          • 1970-01-01
          • 2017-02-05
          • 1970-01-01
          相关资源
          最近更新 更多