来自两个 li 元素的逗号分隔列表
[英]A comma separated list from two li elements
问题描述
I would need help to move forward with my code.
我需要帮助来推进我的代码。 I want each time the user writes (,) between two words, they should be separated and form two li elements in a list.我希望每次用户在两个单词之间写 (,) 时，它们应该分开并在列表中形成两个 li 元素。 Right now the whole code works but I would get tips on how to make a comma separated text.现在整个代码都可以工作，但我会得到有关如何制作逗号分隔文本的提示。
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
You could do something like I did in this codepen .你可以像我在这个codepen中那样做。
Use the split function to split a string when it encounters a specified character, in your case a comma.使用split function 在遇到指定字符（在您的情况下为逗号）时拆分字符串。
The HTML (pug) would look like this: HTML（哈巴狗）看起来像这样：
form
label
span seperated list
input#js-seperatedList(type="text")
ul.results
And this will be your JavaScript code:这将是您的 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
Use split() function to separate the words using comma and then create li element and append into final ul element.使用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
i would recommend using addEventListener which is much simpler than calling functions inside html elements, and to do what you asking the split() method can do that with any string, if there is something you don't understand with this code i am happy to help我建议使用 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.