JS работа с событием нажатия клавиш e.ShiftKey

167

18 декабря 2019, 05:30

Создать html-страницу со списком книг.

При щелчке на элемент, цвет текста должен меняться на оранжевый. При повторном щелчке на другую книгу, предыдущей необходимо возвращать прежний цвет.

Если при клике мышкой была зажата клавиша Ctrl, то элемент добавляется / удаляется из выделенных.

Если при клике мышкой была зажата клавиша Shift, то к выделению добавляются все элементы в промежутке от предыдущего кликнутого до текущего.

function bookList(e, n) { 
  var bs = document.getElementById("BookList2"); 
  var book = document.getElementById("list" + n); 
  var li = bs.getElementsByTagName("li"); 
 
  if (e.ctrlKey) { 
    if (book.style.backgroundColor == "orange") 
      book.style.backgroundColor = "inherit"; 
    else 
      book.style.backgroundColor = "orange"; 
    return; 
  } 
  for (b of li) { 
 
    b.style.backgroundColor = "inherit"; 
  } 
  book.style.backgroundColor = "orange"; 
 
  if (e.ShiftKey) { 
    if (book.style.backgroundColor == "orange") 
      for (b of li) { 
        if (book.style.backgroundColor == "inherit") 
          b.style.backgroundColor = "orange"; 
        esle 
        return; 
 
      }

<ol id="BookList2"> 
  <li onclick="bookList(event, 1)" id="list1">JavaScript: The Good Parts («JavaScript. Сильные стороны»)</li> 
  <li onclick="bookList(event, 2)" id="list2">You Don’t Know JS («Вы не знаете JS»)</li> 
  <li onclick="bookList(event, 3)" id="list3">Eloquent JavaScript: A Modern Introduction to Programming («Выразительный Javascript»)</li> 
  <li onclick="bookList(event, 4)" id="list4">Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript («Сила JavaScript. 68 способов эффективного использования JS»)</li> 
  <li onclick="bookList(event, 5)" id="list5">JavaScript: The Definitive Guide («JavaScript. Подробное руководство»)</li> 
</ol>

Подскажите может кто то знает решение моей проблемы

Вариант с Shift не работает, подскажите как написать проверку для определения где произошел клик вниз по списку книг или вверху и как тогда если он был вверху for-ом пройтись вверх по списку книг

Answer 1

if(e.shiftKey)      // если нажат  shift
    { 
        if(book!=null)   //   если выбрана книга  из списка
            {
                for(var i=book ; i<pre;++i)   //  проходим циклом по  списку  от  книги  выбраной  до  предыдущей,  если она стоит в 
                                                                                списке ниже  "pre"  то идем  по списку вниз и  делаем style "orange";
                    book.style.backgroundColor="orange";  // тут пробовал писать  i.style.backgroundColor="orange";
            }
        else
            {
                for(var i=book ; i>pre;--i)
                    book.style.backgroundColor="orange";
            }
    } 
    for(b of li)
    {
    b.style.backgroundColor="inherit";

    }book.style.backgroundColor="orange";
}
Но это  не  работает, не  могу понять  где  проблема