Как при клике на элементе определить, что была зажата клавиша ALT

Question

задача такая

Добавьте на блок .out-1 событие клик и по клику запуск функции f1. Функция должна возвращать true или false в зависимости от того, нажата ли клавиша alt или нет в момент клика. Также, выводите на экран результат. Вывод осуществляется в #out-1.

пытался через консоль получить результат что бы уже дальше понимать правильно ли я делаю. как оказывается получаю я undefined.и дальше я не могу идти потому что нечего я не получаю что мне нужно. напишите пожалуйста правильный код. как в консоли получить ответ и вывод на экран

let out = document.querySelector('#out-1');
let qe = document.querySelector('.out-1');

 qe.onclick = f1;
  function f1(event) {
    
    console.log(qe.altKey);
  }

Answer 1

такой код устроит?

function f1(event) {
    return event.altKey;
}

let block = document.querySelector('.out-1');

block.addEventListener('click', (event) => block.textContent = (f1(event) == true) ? 'YES' : 'NO');

    .out-1 {
        width:      150px;
        height:     50px;
        
        border:     1px solid black;
    }

<div class = 'out-1'></div>

вариант 2:

    function f1(event) {
        return event.altKey;
    }

    let block = document.querySelector('.out-1');

    block.addEventListener('click', (event) => block.textContent = ["ЛОЖЬ", "ИСТИНА"][+f1(event)]);

.out-1 {
  width:    150px;
  height:   50px;
            
  border:   1px solid black;
}

<div class = 'out-1'></div>

Answer 2

При клике на элемент создаётся MouseEvent(почитать тут). В функцию, которая должна сработать по клику прилитает инстанс MouseEvent. А у него есть свойство altKey.

Вариант 1:

const clicked = document.querySelector('#out-1');
const output = document.querySelector('.out-1');
const success_message = 'Была зажата клавиша ALT';
const error_message = 'Клавиша ALT не была зажата!';

clicked.addEventListener('click', function(event) {
   if (event.altKey) {
     console.log(true);
     output.innerText = success_message;
   } else {
     output.innerText = error_message;
   }
});

<div id="out-1">Click me</div>
<div class="out-1"></div>

Вариант 2:

const clicked = document.querySelector('#out-1');
const output = document.querySelector('.out-1');

clicked.addEventListener('click', function(event) {
  output.innerHTML = `<span class="${event.altKey}">${event.altKey}</span>`;
});

.true {
  color: green;
}
.false {
  color: red;
}

<div id="out-1">Click me</div>
<div class="out-1"></div>

БЛОГ НА HUSL

Как при клике на элементе определить, что была зажата клавиша ALT

Ответы (2 шт):