來自兩個 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.