使 2 个文本值显示在 1 个列表项中

Posted 2023-03-06

技术标签:

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

【问题讨论】：

【参考方案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>

【讨论】：

以上是关于使 2 个文本值显示在 1 个列表项中的主要内容，如果未能解决你的问题，请参考以下文章

什么值会在文本字段上显示为无穷大？

如何在 RecyclerView 的一项中找到两个文本块？

Datagridview 绑定到对象 - 使新行显示为空白

如何使用office API在Outlook Web加载项中显示菜单控件项目的纯文本菜单？

根据显示的数据表值禁用下拉列表项

从运行时添加的列表框项中获取字符串[重复]