Sledování modifikačních kláves v JavaScriptu

Pomocí objektu Event lze zjistit, zda byly v okamžiku události stisknuty klávesy Ctrl, Alt a Shift. To se provádí pomocí vlastností ctrlKey, altKey a shiftKey - mají hodnotu true nebo false v závislosti na tom, zda byla tato klávesa v okamžiku události stisknuta nebo ne.

Podívejme se na příklad. Předpokládejme, že máme následující tlačítko:

html<button id="elem">text</button>

Při kliknutí na tlačítko vypíšeme zprávu o tom, zda byla stisknuta jedna z kláves Ctrl, Alt a Shift:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
  if (event.ctrlKey) {
    console.log('stisknut Ctrl');
  }
  
  if (event.altKey) {
    console.log('stisknut Alt');
  }
  
  if (event.shiftKey) {
    console.log('stisknut Shift');
  }
});

Задание 1

Je dán prvek. Zařiďte, aby se po kliknutí na něj obarvil na červeno, ale pouze pokud je v okamžiku kliknutí stisknuta klávesa Alt.

Задание 2

Předpokládejme, že máte seznam ul s prvky li:

html<ul id="elem">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Zařiďte, aby po kliknutí na jakýkoli prvek li byl na konec jeho textu přidán znak 1, pokud je stisknuta klávesa Ctrl, a znak 2, pokud je stisknuta klávesa Shift.