1

задача такая

Добавьте на блок .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);
  }
4
  • 2
    Замените qe.altKey на event.altKey? Commented 28 нояб. 2020 в 18:10
  • "помогите, уже схожу с ума ..." - я бы поредактировал заголовок и текст вопроса, а то могут прибежать санитары - оно Вам надо ? Commented 28 нояб. 2020 в 18:24
  • странно. Мне кажется я так пробывал и не чего не происходило, сейчас работает в консоли, буду пробывать выводить это все дело. благодарю Commented 28 нояб. 2020 в 18:48
  • все получилось let out = document.querySelector('#out-1'); let qe = document.querySelector('.out-1'); qe.onclick = f1; function f1(event) { out.innerHTML+= event.altKey; console.log(event.altKey); } Commented 28 нояб. 2020 в 18:52

2 ответа 2

2

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

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>

3
  • все это да,отлично. но вывод должен быть именно истина или ложь и написано не переменой Commented 28 нояб. 2020 в 18:45
  • 1
    добавил второй вариант в котором вообще нет никаких сравнений - так надо?
    – Zhihar
    Commented 28 нояб. 2020 в 18:49
  • все получилось именно таким оброзом он должен был выглядеть let out = document.querySelector('#out-1'); let qe = document.querySelector('.out-1'); qe.onclick = f1; function f1(event) { out.innerHTML+= event.altKey; console.log(event.altKey); } Commented 28 нояб. 2020 в 18:56
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>

5
  • все это да,отлично. но вывод должен быть именно истина или ложь и написано не переменой Commented 28 нояб. 2020 в 18:45
  • MouseEvent за подсказку о прочтении благодарю) Commented 28 нояб. 2020 в 18:48
  • все получилось именно таким оброзом он должен был выглядеть let out = document.querySelector('#out-1'); let qe = document.querySelector('.out-1'); qe.onclick = f1; function f1(event) { out.innerHTML+= event.altKey; console.log(event.altKey); } Commented 28 нояб. 2020 в 18:55
  • 1
    @ВадимУманский Прямо true/false вывести?
    – doox911
    Commented 28 нояб. 2020 в 18:55
  • 1
    @ВадимУманский Отлично. Удачи!
    – doox911
    Commented 28 нояб. 2020 в 18:57

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.