在待办事项列表网页上显示唯一指定的优先级任务（高/中/低）

Question

const lists = document.getElementsByClassName('task-list')[0];
const radios = document.getElementsByName('rgPrior');

function onClick()
{
  for (let i = 0, length = radios.length; i < length; i++)
  {
    if (radios[i].checked)
    {
      btn_selected_color = radios[i].value + 'P';
      
      break;
    }
  }
  
  const task = document.getElementById('item').value;
  
  // Add it to the HTML
  addTodo(task, btn_selected_color);
  
  // Save it to localStorage
  let data = JSON.parse(localStorage.getItem('todo')) || [];
  data.push([
    task,
    btn_selected_color
  ]);
  localStorage.setItem('todo', JSON.stringify(data));
}

function addTodo(todo, priority)
{
  let entry = document.createElement('li');
  let close = document.createElement('button');
  
  entry.className = priority;
  close.className = 'close-btn';
  
  close.innerText = 'X';
  
  close.addEventListener('click', function(e)
  {
    // Delete from localstorage
    let data = JSON.parse(localStorage.getItem('todo'));
    let index = data.indexOf([
      todo,
      priority
    ]);
    
    data.splice(index, 1);
    
    localStorage.setItem('todo', JSON.stringify(data));
    
    // Delete HTML
    this.parentElement.remove();
  });
  
  entry.appendChild(close);
  entry.appendChild(document.createTextNode(todo));
  lists.appendChild(entry);
}

// When the page is loaded, get from localStorage
window.addEventListener('load', function()
{
  const data = JSON.parse(localStorage.getItem('todo'));
  
  data.forEach(function(task)
  {
    addTodo(...task);
  });
});





// const items = [{
//   value: 'Item 1',
//   className: 'low',
// }, {
//   value: 'Item 2',
//   className: 'high',
// }, {
//   value: 'Item 3',
//   className: 'low',
// }, {
//   value: 'Item 4',
//   className: 'medium',
// }, {
//   value: 'Item 5',
//   className: 'medium',
// }];



//const ul = document.getElementById('filtered-list');
const button1 = document.getElementById('high-priority');
const button2 = document.getElementById('medium-priority');
const button3 = document.getElementById('low-priority');

const createListtask = function createListtask(filteredList) {
  lists.innerHTML = '';

  filteredList.map((task) => {
    const li = document.createElement('li');
    li.append(task.value);
    li.className = task.className;
    lists.append(li);
  });
};

const click = function click(event) {
  event.preventDefault();

  const t = this;
  const filtered = task.filter(task => task.className === t.priority);
  createListtask(filtered);
}

button1.addEventListener('click', click.bind({ priority: 'high' }));
button2.addEventListener('click', click.bind({ priority: 'medium' }));
button3.addEventListener('click', click.bind({ priority: 'low' }));

createListtask(task);

.hiP {
  background-color: red;
}

.medP {
  background-color: yellow;
}

.lowP {
  background-color: green;
}

.ch5 {
  padding-left: 30px;
}

<form>
        <label for="txtAdd">New thing to do:</label>
        <input name="txtAdd" type="text" id="item" />
        <input type="button" name="btnAdd" id="btnAdd" value="Add List" onClick="onClick()" />
      </form>
      <p>Set Priority</p>
      <p>
        <label><input type="radio" name="rgPrior" value="hi" id="rgPrior_0"/>High</label>
        <br>
        <label><input type="radio" name="rgPrior" value="med" id="rgPrior_1"/>Medium</label>
        <br/>
        <label><input type="radio" name="rgPrior" value="low" id="rgPrior_2"/>Low</label>
        <br/>
      </p>
      <ul class="task-list"  id="filtered-list"> </ul>
      

        <br><br><br>
      <!-- <ul></ul> -->
      <p> select to get a specific task</p>
      <button id="high-priority" type="button">High Priority</button>
      <button id="medium-priority" type="button">Medium Priority</button>
      <button id="low-priority" type="button">Low Priority</button>

我正在使用 HTML/CSS/JavaScript 制作待办事项列表网页。我只显示具有优先级（高/低/中）的用户输入的内容。我无法完成最后一部分（选择以获取特定任务）。

主要概念是，如果用户点击高/中/低按钮，它应该只显示相应的优先级列表。如果用户点击高优先级按钮，则只显示高优先级列表数据。

高优先级（背景-红色），中优先级（背景-黄色），低优先级（背景-绿色）。请修改我们的代码，下面你可以看到我的代码。拜托，你能帮帮我吗？
（我们的一些代码仅由我们的 Stack Overflow 团队解释）。

Answer 1

const lists = document.getElementsByClassName('task-list')[0];
const radios = document.getElementsByName('rgPrior');

function onClick() {
    var radios = document.querySelector('input[name="rgPrior"]:checked');
    if (radios != null) {
        var btn_selected_color = radios.value + 'P'
        const task = document.getElementById('item').value;
        addTodo(task, btn_selected_color);
        let data = JSON.parse(localStorage.getItem('todo')) || [];
        data.push([
            task,
            btn_selected_color
        ]);
        localStorage.setItem('todo', JSON.stringify(data));
    }

}

function addTodo(todo, priority) {
    let entry = document.createElement('li');
    let close = document.createElement('button');

    entry.className = priority;
    close.className = 'close-btn';

    close.innerText = 'X';

    close.addEventListener('click', function(e) {
        // Delete from localstorage
        let data = JSON.parse(localStorage.getItem('todo'));
        let index = data.indexOf([
            todo,
            priority
        ]);
        data.splice(index, 1);
        localStorage.setItem('todo', JSON.stringify(data));
        this.parentElement.remove();
    });

    entry.appendChild(close);
    entry.appendChild(document.createTextNode(todo));
    lists.appendChild(entry);
}

// When the page is loaded, get from localStorage
window.addEventListener('load', function() {
    const data = JSON.parse(localStorage.getItem('todo'));

    data.forEach(function(task) {
        addTodo(...task);
    });
});

const button1 = document.getElementById('high-priority');
const button2 = document.getElementById('medium-priority');
const button3 = document.getElementById('low-priority');

const createListtask = function createListtask(filteredList) {
    lists.innerHTML = '';

    filteredList.map((task) => {
        const li = document.createElement('li');
        li.append(task[0]); //Replace key name if you are passing JSON
        li.className = task[1]; ////Replace key name if you are passing JSON
        lists.append(li);
    });
};

const click = function click(event) {
    event.preventDefault();
    const data = JSON.parse(localStorage.getItem('todo'));
    //This data you can get either from localStorage or you can create your prefered way. And the filtering data[1] you can replace with key name if it is JSON 
    const filtered = data.filter(data => data[1] === this.priority);
    createListtask(filtered);
}

button1.addEventListener('click', click.bind({
    priority: 'hiP'
}));
button2.addEventListener('click', click.bind({
    priority: 'medP'
}));
button3.addEventListener('click', click.bind({
    priority: 'lowP'
}));

我可以看到您的代码出现错误Uncaught ReferenceError: task is not defined（底部为createListtask(task);）。如果它的任务是你已经在你的代码中设计了，那么请告诉我变量的类型。

输出如下