您单击下拉列表中的一个项目,然后单击按钮,它将其添加到右侧的列表中。一旦该项目位于右侧,我就可以选择为其添加注释。我面临的问题是,当我只想将文本作为注释选项的子列表项时,注释会将文本添加为主列表项和子列表项。
我尝试过弄乱我的笔记按钮、生成项目符号列表功能和将项目添加到列表功能,但我觉得我忽略了一些东西。
我的代码是:
document.getElementById('callerName').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const callerName = document.getElementById('callerName').value.trim();
if (callerName !== '') {
addItemToList(callerName, true);
document.getElementById('callerName').value = '';
}
}
});
function showOptionsDiv() {
var selectedOption = document.getElementById('dropdown').value;
var optionsDiv = document.getElementById('optionsDiv');
var divs = optionsDiv.querySelectorAll('div');
divs.forEach(function(div) {
div.classList.add('hidden');
});
if (selectedOption) {
var divToShow = document.getElementById(selectedOption + 'Div');
if (divToShow) {
optionsDiv.classList.remove('hidden');
divToShow.classList.remove('hidden');
}
} else {
optionsDiv.classList.add('hidden');
}
}
function addOptionToList(selectId, optionId) {
const select = document.getElementById(selectId);
const selectedOption = select.options[select.selectedIndex];
const optionText = selectedOption.text;
const optionValue = selectedOption.value;
const listItem = document.createElement('li');
listItem.textContent = optionText;
listItem.setAttribute('value', optionValue);
listItem.setAttribute('id', optionId);
addButtonsToListItem(listItem, optionText);
document.getElementById('optionsList').appendChild(listItem);
}
function addCustomOptionToList() {
const customOption = prompt("Enter custom option:");
if (customOption !== null && customOption !== "") {
const listItem = document.createElement('li');
listItem.textContent = customOption;
addButtonsToListItem(listItem, customOption);
document.getElementById('optionsList').appendChild(listItem);
}
}
function addItemToList(option, isTextInput = false) {
const listItem = document.createElement('li');
if (isTextInput) {
listItem.textContent = "Caller: " + option;
} else {
listItem.textContent = option;
}
addButtonsToListItem(listItem, option);
document.getElementById('optionsList').appendChild(listItem);
}
function addButtonsToListItem(listItem, optionText) {
const removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.onclick = function() {
listItem.remove();
};
listItem.appendChild(removeButton);
const repeatButton = document.createElement('button');
repeatButton.textContent = 'Repeat';
repeatButton.onclick = function() {
repeatOption(optionText, listItem);
};
listItem.appendChild(repeatButton);
const noteButton = document.createElement('button');
noteButton.textContent = 'Note';
noteButton.onclick = function() {
writeNoteInput(listItem);
};
listItem.appendChild(noteButton);
}
function writeNoteInput(listItem) {
if (listItem.querySelector('.note-input')) {
return;
}
const noteInput = document.createElement('input');
noteInput.type = 'text';
noteInput.placeholder = 'Write your note here';
noteInput.classList.add('note-input');
const saveButton = document.createElement('button');
saveButton.textContent = 'Save Note';
saveButton.onclick = function() {
addNoteToItem(listItem, noteInput.value);
noteInput.remove();
saveButton.remove();
};
noteInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault();
addNoteToItem(listItem, noteInput.value);
noteInput.remove();
saveButton.remove();
}
});
listItem.appendChild(noteInput);
listItem.appendChild(saveButton);
}
function addNoteToItem(listItem, note) {
if (note.trim() !== '') {
let sublist = listItem.querySelector('ul');
if (!sublist) {
sublist = document.createElement('ul');
listItem.appendChild(sublist);
}
const noteListItem = document.createElement('li');
noteListItem.textContent = note;
sublist.appendChild(noteListItem);
}
}
function generateBulletedList() {
const listItems = document.getElementById('optionsList').getElementsByTagName('li');
let bulletedList = '';
for (let i = 0; i < listItems.length; i++) {
bulletedList += '- ' + listItems[i].childNodes[0].textContent.trim() + '\n';
const sublistItems = listItems[i].querySelectorAll('ul > li');
for (let j = 0; j < sublistItems.length; j++) {
bulletedList += ' - ' + sublistItems[j].textContent.trim() + '\n';
}
}
const textArea = document.createElement('textarea');
textArea.value = bulletedList;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
alert('Bulleted list copied to clipboard:\n\n' + bulletedList);
}
function repeatOption(option, listItem) {
const newItem = option + ' again';
const newListItem = document.createElement('li');
newListItem.textContent = newItem;
addButtonsToListItem(newListItem, newItem);
document.getElementById('optionsList').appendChild(newListItem);
}
.hidden {
display: none;
}
.container {
display: flex;
justify-content: left;
align-items: flex-start;
}
.content {
flex: 1;
}
.sidebar {
flex: 0 0 600px;
margin-left: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
li button {
margin-left: 10px;
}
<div class="container">
<div class="content">
<input type="text" id="callerName" placeholder="Enter Caller Name">
<select id="dropdown" onchange="showOptionsDiv()">
<option value=""></option>
<optgroup label="PC">
<option value="Cookie">Cookie Bake</option>
<option value="Monitor issues">Monitor issues</option>
</optgroup>
<optgroup label="Router/Modem">
<option value="Down Site">Down Site</option>
<option value="ISP">ISP</option>
</optgroup>
</select>
<div id="optionsDiv" class="hidden">
<div id="CookieDiv" class="hidden">
<br>
<button onclick="addItemToList('1')">Test 1</button><br>
<button onclick="addItemToList('2')">Test 2</button><br>
<button onclick="addItemToList('3')">Test 3</button><br>
<button onclick="addItemToList('4')">Test 4</button><br>
<button onclick="addItemToList('5')">Test 5</button><br>
<button onclick="addOptionToList('dropdown', 'option3')">Option 3</button><br>
<button onclick="addCustomOptionToList()">Add Custom Option</button><br>
</div>
<div id="Monitor issuesDiv" class="hidden">
<br>
<button onclick="addItemToList('1')">Test 1</button><br>
<button onclick="addItemToList('2')">Test 2</button><br>
<button onclick="addItemToList('3')">Test 3</button><br>
<button onclick="addItemToList('4')">Test 4</button><br>
</div>
<div id="Down SiteDiv" class="hidden">
<button onclick="addItemToList('Powercycled Modem/Router')">Power Cycle Modem/Router</button><br>
<button onclick="addItemToList('Bounced Tunnel')">Tunnel Bounce</button><br>
<button onclick="addItemToList('Called ISP')">Called ISP</button><br>
<button onclick="addItemToList('ISP Outage')">ISP reports outage</button><br>
<button onclick="addItemToList('Site back up, Problem resolved')">Site Up</button><br>
<button onclick="addItemToList('Site still down')">Site still down</button><br>
<button onclick="addItemToList('Site still down, Sending Router')">Send Router</button><br>
<button onclick="addItemToList('Site still down, Sending Crash Pack')">Send Crash Pack</button><br>
<button onclick="addOptionToList('dropdown', 'option3')">Option 3</button><br>
<button onclick="addCustomOptionToList()">Add Custom Option</button><br>
</div>
<div id="ISPDiv" class="hidden">
</div>
</div>
</div>
<div class="sidebar">
<ul id="optionsList"></ul>
<button onclick="generateBulletedList()">Generate Bulleted List</button>
</div>
如上所述,我想在添加注释时将一个项目作为子列表项目添加到列表中,并以某种方式删除编写注释时弹出的第二个注释按钮。
使用时
const listItems = document.getElementById('optionsList').getElementsByTagName('li');
它选择
li
内的所有 optionsList
元素,其中包括注释。使用 .children()
来仅获取第一级列表项。
document.getElementById('callerName').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const callerName = document.getElementById('callerName').value.trim();
if (callerName !== '') {
addItemToList(callerName, true);
document.getElementById('callerName').value = '';
}
}
});
function showOptionsDiv() {
var selectedOption = document.getElementById('dropdown').value;
var optionsDiv = document.getElementById('optionsDiv');
var divs = optionsDiv.querySelectorAll('div');
divs.forEach(function(div) {
div.classList.add('hidden');
});
if (selectedOption) {
var divToShow = document.getElementById(selectedOption + 'Div');
if (divToShow) {
optionsDiv.classList.remove('hidden');
divToShow.classList.remove('hidden');
}
} else {
optionsDiv.classList.add('hidden');
}
}
function addOptionToList(selectId, optionId) {
const select = document.getElementById(selectId);
const selectedOption = select.options[select.selectedIndex];
const optionText = selectedOption.text;
const optionValue = selectedOption.value;
const listItem = document.createElement('li');
listItem.textContent = optionText;
listItem.setAttribute('value', optionValue);
listItem.setAttribute('id', optionId);
addButtonsToListItem(listItem, optionText);
document.getElementById('optionsList').appendChild(listItem);
}
function addCustomOptionToList() {
const customOption = prompt("Enter custom option:");
if (customOption !== null && customOption !== "") {
const listItem = document.createElement('li');
listItem.textContent = customOption;
addButtonsToListItem(listItem, customOption);
document.getElementById('optionsList').appendChild(listItem);
}
}
function addItemToList(option, isTextInput = false) {
const listItem = document.createElement('li');
if (isTextInput) {
listItem.textContent = "Caller: " + option;
} else {
listItem.textContent = option;
}
addButtonsToListItem(listItem, option);
document.getElementById('optionsList').appendChild(listItem);
}
function addButtonsToListItem(listItem, optionText) {
const removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.onclick = function() {
listItem.remove();
};
listItem.appendChild(removeButton);
const repeatButton = document.createElement('button');
repeatButton.textContent = 'Repeat';
repeatButton.onclick = function() {
repeatOption(optionText, listItem);
};
listItem.appendChild(repeatButton);
const noteButton = document.createElement('button');
noteButton.textContent = 'Note';
noteButton.onclick = function() {
writeNoteInput(listItem);
};
listItem.appendChild(noteButton);
}
function writeNoteInput(listItem) {
if (listItem.querySelector('.note-input')) {
return;
}
const noteInput = document.createElement('input');
noteInput.type = 'text';
noteInput.placeholder = 'Write your note here';
noteInput.classList.add('note-input');
const saveButton = document.createElement('button');
saveButton.textContent = 'Save Note';
saveButton.onclick = function() {
addNoteToItem(listItem, noteInput.value);
noteInput.remove();
saveButton.remove();
};
noteInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault();
addNoteToItem(listItem, noteInput.value);
noteInput.remove();
saveButton.remove();
}
});
listItem.appendChild(noteInput);
listItem.appendChild(saveButton);
}
function addNoteToItem(listItem, note) {
if (note.trim() !== '') {
let sublist = listItem.querySelector('ul');
if (!sublist) {
sublist = document.createElement('ul');
listItem.appendChild(sublist);
}
const noteListItem = document.createElement('li');
noteListItem.textContent = note;
sublist.appendChild(noteListItem);
}
}
function generateBulletedList() {
const listItems = document.getElementById('optionsList').children;
let bulletedList = '';
for (let i = 0; i < listItems.length; i++) {
bulletedList += '- ' + listItems[i].childNodes[0].textContent.trim() + '\n';
const sublistItems = listItems[i].querySelectorAll('ul > li');
for (let j = 0; j < sublistItems.length; j++) {
bulletedList += ' - ' + sublistItems[j].textContent.trim() + '\n';
}
}
const textArea = document.createElement('textarea');
textArea.value = bulletedList;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
alert('Bulleted list copied to clipboard:\n\n' + bulletedList);
}
function repeatOption(option, listItem) {
const newItem = option + ' again';
const newListItem = document.createElement('li');
newListItem.textContent = newItem;
addButtonsToListItem(newListItem, newItem);
document.getElementById('optionsList').appendChild(newListItem);
}
.hidden {
display: none;
}
.container {
display: flex;
justify-content: left;
align-items: flex-start;
}
.content {
flex: 1;
}
.sidebar {
flex: 0 0 600px;
margin-left: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
li button {
margin-left: 10px;
}
<div class="container">
<div class="content">
<input type="text" id="callerName" placeholder="Enter Caller Name">
<select id="dropdown" onchange="showOptionsDiv()">
<option value=""></option>
<optgroup label="PC">
<option value="Cookie">Cookie Bake</option>
<option value="Monitor issues">Monitor issues</option>
</optgroup>
<optgroup label="Router/Modem">
<option value="Down Site">Down Site</option>
<option value="ISP">ISP</option>
</optgroup>
</select>
<div id="optionsDiv" class="hidden">
<div id="CookieDiv" class="hidden">
<br>
<button onclick="addItemToList('1')">Test 1</button><br>
<button onclick="addItemToList('2')">Test 2</button><br>
<button onclick="addItemToList('3')">Test 3</button><br>
<button onclick="addItemToList('4')">Test 4</button><br>
<button onclick="addItemToList('5')">Test 5</button><br>
<button onclick="addOptionToList('dropdown', 'option3')">Option 3</button><br>
<button onclick="addCustomOptionToList()">Add Custom Option</button><br>
</div>
<div id="Monitor issuesDiv" class="hidden">
<br>
<button onclick="addItemToList('1')">Test 1</button><br>
<button onclick="addItemToList('2')">Test 2</button><br>
<button onclick="addItemToList('3')">Test 3</button><br>
<button onclick="addItemToList('4')">Test 4</button><br>
</div>
<div id="Down SiteDiv" class="hidden">
<button onclick="addItemToList('Powercycled Modem/Router')">Power Cycle Modem/Router</button><br>
<button onclick="addItemToList('Bounced Tunnel')">Tunnel Bounce</button><br>
<button onclick="addItemToList('Called ISP')">Called ISP</button><br>
<button onclick="addItemToList('ISP Outage')">ISP reports outage</button><br>
<button onclick="addItemToList('Site back up, Problem resolved')">Site Up</button><br>
<button onclick="addItemToList('Site still down')">Site still down</button><br>
<button onclick="addItemToList('Site still down, Sending Router')">Send Router</button><br>
<button onclick="addItemToList('Site still down, Sending Crash Pack')">Send Crash Pack</button><br>
<button onclick="addOptionToList('dropdown', 'option3')">Option 3</button><br>
<button onclick="addCustomOptionToList()">Add Custom Option</button><br>
</div>
<div id="ISPDiv" class="hidden">
</div>
</div>
</div>
<div class="sidebar">
<ul id="optionsList"></ul>
<button onclick="generateBulletedList()">Generate Bulleted List</button>
</div>