Как отправить сигнал в JS при нажатии кнопки?

Question

Вот есть у меня такая штука.

<!DOCTYPE html>

<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Текст!</strong> Еще текст... <strong>еще</strong> и еще.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button> 
</div>
</body>

Его лучше выполнять не в сниппете, потому-что по какой-то причине он тут не форматируется, как положено.
В общем, я хочу, чтобы при нажатии на <button type="button" class="close" data-dismiss="alert" aria-label="Close"> подавался какой-то сигнал в JavaScript файл font.js. А точнее, я хочу, чтобы при нажатии переменная clicked из стандартного значения 0 переходила в значения 1.
Вот, кстати, мой JS файл.


    const fonter = document.querySelector("section.p");
    var clicked = 0;

    if (var clicked == 1) {
            fonter.style.font-size = "12px";
        } else {
            fonter.style.font-size = "14px";
        }
    });

Он, по идее, должен менять размер шрифта если clicked == 1.
Подскажите, пожалуйста, как передать сигнал в JavaScript и есть ли у меня ошибки в коде. Спасибо заранее)

Answer 1

Этот "сигнал" называется событие. Нужно запускать код при клике.

let fonter = document.querySelector("section.p");
let btn = document.querySelector(".close");

let clicked = false;
btn.addEventListener("click", function() {
  if( clicked ) {
    fonter.style.fontSize = "12px";
  } else {
    fonter.style.fontSize = "14px";
  }
  // См. → "Тернарный оператор", попробуйте переписать через него.
  
  clicked = !clicked; 
  // ! — логическое `НЕ`, false превращает в true, и наоборот.
});

<section class="p">
  Test-test-test
</section>

<button type="button" class="close"> Click </button>

А вообще, такие вещи можно делать через переключение класса:

let fonter = document.querySelector("section.p");
let btn = document.querySelector(".close");

btn.addEventListener("click", function() {
  fonter.classList.toggle("font-14");
});

section.p {
  font-size: 12px;
  color: red;
}
section.p.font-14 {
  font-size: 14px;
  color: green;
}

<section class="p">
  Test-test-test
</section>

<button type="button" class="close"> Click </button>

БЛОГ НА HUSL

Как отправить сигнал в JS при нажатии кнопки?

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