(Ваниль) JS: флажок «установлен», возвращающий неожиданные результаты

Question

Используя перо ниже, вы можете видеть, что есть два элемента, кнопка и флажок ввода.

Когда кнопка нажата, я бы хотел определить статус флажка (нажата / не нажата).

Независимо от наличия визуальной галочки или нет, консоль всегда регистрирует false. Почему это так?

https://codepen.io/sterlingbutters/pen/ZEGGgvm

РЕДАКТИРОВАТЬ (код):

HTML:

<input id='stall' type="checkbox">

<button id='button'>Test

JS:

var stall = document.getElementById('stall').checked;
var button = document.getElementById('button');
button.onclick = function () {
  console.log(stall);
}

Answer 1

Вы должны переназначить остановку при нажатии кнопки. Таким образом, используя

button.onclick = function () {
  var stall = document.getElementById('stall').checked
  console.log(stall);
}

Он отлично работает.

Answer 2

После того, как вы присвоили «stall», он не будет переназначен в «button.onclick». Вы должны переназначить, например,

var button = document.getElementById('button');
button.onclick = function () {
  var stall = document.getElementById('stall').checked;
  console.log(stall);
}

или лучше

var stall = document.getElementById('stall');
var button = document.getElementById('button');
button.onclick = function () {
  console.log(stall.checked);
}

Answer 3

Попробуйте вместо этого: назначьте элемент переменной, а затем внутри функции onclick вы получите свойство checked при каждом его запуске.

Если вы просто сохраните логическое значение checked в переменная, она никогда не обновится. Примитивные типы, такие как логические значения, всегда хранятся как простые значения, а не как автоматически обновляемые ссылки на исходное свойство.

var stall = document.getElementById('stall');
var button = document.getElementById('button');
button.onclick = function () {
  console.log(stall.checked);
}

<input id='stall' type="checkbox">

<button id='button'>Test