代码未按预期执行并生成项目作为列表和子列表项目

问题描述 投票:0回答:1

您单击下拉列表中的一个项目,然后单击按钮,它将其添加到右侧的列表中。一旦该项目位于右侧,我就可以选择为其添加注释。我面临的问题是,当我只想将文本作为注释选项的子列表项时,注释会将文本添加为主列表项和子列表项。

我尝试过弄乱我的笔记按钮、生成项目符号列表功能和将项目添加到列表功能,但我觉得我忽略了一些东西。

我的代码是:

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>

如上所述,我想在添加注释时将一个项目作为子列表项目添加到列表中,并以某种方式删除编写注释时弹出的第二个注释按钮。

enter image description here

enter image description here

javascript html list dropdown sublist
1个回答
0
投票

使用时

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>

© www.soinside.com 2019 - 2024. All rights reserved.