I am trying to figure out what is going wrong with my code. so you click an item on the dropdown, then click the button and it adds it to a list on the right, once the item is on the right i have the option to add a note to it. The problem im facing is that the note will add the text as a main list item and as a sublist item when i only want it as a sublist item for the note option. i have tried messing with my note button, the generate bulleted list function, and the add items to list function but i feel like im overlooking something. i tried turning to chatgpt to see if it could fix my issue but after a couple script changes it was unable to and managed to add a second note button once the first is pressed. can anyone look at my code and tell me what im doing wrong?
My code is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Options to List</title>
<style>
.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;
}
</style>
</head>
<body>
<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>
</div>
<script>
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:nn' + 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);
}
</script>
</body>
</html>
as stated above, i want to add an item to a list as a sublist item when adding a note and somehow remove my second note button that pops up when writing the note.
New contributor
matt l is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.