来自两个 li 元素的逗号分隔列表
[英]A comma separated list from two li elements
问题描述
我需要帮助来推进我的代码。 我希望每次用户在两个单词之间写 (,) 时，它们应该分开并在列表中形成两个 li 元素。 现在整个代码都可以工作，但我会得到有关如何制作逗号分隔文本的提示。
var names = [];
function convert_to_list()
{
var theName = document.getElementById("enter").value;
if (theName == "" || theName.length == 0)
{
return false; //stop the function since the value is empty.
}
names.push(theName);
document.getElementById("converted_list").children[0].innerHTML += "<li>"+names[names.length-1]+"</li>";
}
<form>
<fieldset>
<textarea id="enter" onkeyup=""></textarea>
<input onclick="convert_to_list()"value="Konvertera" type="button"/>
<div id="converted_list"><ul></ul></div>
</form>
</fieldset>
4 个解决方案
解决方案1
0 2021-05-05 10:34:41
你可以像我在这个codepen中那样做。
使用split function 在遇到指定字符（在您的情况下为逗号）时拆分字符串。
HTML（哈巴狗）看起来像这样：
form
label
span seperated list
input#js-seperatedList(type="text")
ul.results
这将是您的 JavaScript 代码：
const inputValue = document.querySelector('#js-seperatedList')
const results = document.querySelector('.results');
inputValue.addEventListener('keyup', (e) => {
results.innerHTML = ''
const res = e.target.value.split(",")
for (let i = 0; i < res.length; i += 1) {
const e = document.createElement('li');
e.innerHTML = res[i]
results.appendChild(e)
}
})
解决方案2
0 2021-05-05 10:39:34
使用split() function 使用逗号分隔单词，然后create li element和 append 到最终的 ul 元素。
const btnEnter = document.getElementById("btnEnter"); btnEnter.addEventListener("click", convert_to_list); const ulElements = document.getElementById("converted_list").children[0]; function convert_to_list() { const theName = document.getElementById("enter").value; if (theName.length <= 0) { return false; } const list = theName.split(","); const liElements = []; for (const value of list) { const li = document.createElement('li'); li.innerHTML = value.trim(); ulElements.appendChild(li); } }
<html> <head></head> <body> <form> <fieldset> <textarea id="enter" onkeyup=""></textarea> <input id="btnEnter" value="Konvertera" type="button"/> <div id="converted_list"><ul></ul></div> </fieldset> </form> </body> </html>
解决方案3
0 2021-05-05 12:18:58
我建议使用 addEventListener ，它比在 html 元素中调用函数要简单得多，并且要执行您要求的 split() 方法可以对任何字符串执行此操作，如果您对此代码有什么不明白的地方，我很乐意帮助
document.querySelector('.btnclick').addEventListener('click', function () {
const theName = document.getElementById('enter').value;
if (theName.includes(',')) {
theName.split(',').map(function (e) {
if (e !== '')
return document
.querySelector('#converted_list')
.insertAdjacentHTML('afterbegin', `<li>${e}</li>`);
});
} else if (theName !== '' || theName.length !== 0) {
document
.querySelector('#converted_list')
.insertAdjacentHTML('afterbegin', `<li>${theName}</li>`);
}
});
<form>
<fieldset>
<textarea id="enter" onkeyup=""></textarea>
<input class="btnclick" value="Konvertera" type="button" />
<div id="converted_list">
<ul></ul>
</div>
</form>
解决方案4
0 2021-05-05 14:12:10
document.querySelector("form").onclick=(ev,v)=>{ if (ev.target.tagName==="BUTTON") { ev.preventDefault(); v=ev.target.previousElementSibling.value.trim(); ev.target.nextElementSibling.innerHTML=(v>""?"<li>"+v.replaceAll(",","</li><li>")+"</li>":""); } }
<html> <head></head> <body> <form> <fieldset> <textarea id="enter" onkeyup=""></textarea> <button>Konvertera</button> <div id="converted_list"><ul></ul></div> </fieldset> </form> </body> </html>
解析UL LI列表以逗号分隔的值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.