Блог

Главная - Вопросы по программированию - Отображение только указанных приоритетных задач(высокий/средний/низкий) на веб-странице списка дел

Отображение только указанных приоритетных задач(высокий/средний/низкий) на веб-странице списка дел

#javascript

Вопрос:

 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. Я сделал это только для отображения контента, введенного пользователями с приоритетными базами (высокий/низкий/средний). Я не могу выполнить последний раздел (выберите, чтобы получить конкретную задачу).

Основная концепция заключается в том, что если пользователь нажимает на кнопки high/medium/low, он должен отображать только соответствующий список приоритетов. Если пользователь нажимает кнопку с высоким приоритетом, то отображаются только данные списка с высоким приоритетом.

Высокий приоритет (фон-красный), средний приоритет (фон-желтый), низкий приоритет (фон-зеленый). Пожалуйста, измените наш код, ниже вы можете увидеть мой код. Пожалуйста, вы можете мне помочь?
(Часть нашего кода объясняется только нашей командой по переполнению стека).

Ответ №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); внизу). Если это задача, которую вы уже разработали в своем коде, пожалуйста, сообщите мне тип переменной.

Вывод выглядит следующим образом

введите описание изображения здесь

Метки: