Почему свойства JavaScript не обновляются автоматически?

#javascript #html #dom #properties

Вопрос:

У меня есть объект со свойством, в котором хранится checked свойство флажка, например:

 var x = {  isChecked: document.querySelector("input").checked };   function getX() {  (x.isChecked ? console.log("checkbox is checked") : console.log("checkbox is not checked")); }

 lt;input type="checkbox"gt; lt;button onclick="getX()"gt;is the checkbox checked?lt;/buttongt;

При установке и снятии флажка значение isChecked свойства не обновляется. Почему это может быть?

1. Потому document.querySelector("input").checked что возвращает, был ли флажок установлен во время его выполнения.

2. Зачем вам нужен дополнительный объект, когда вы можете задать сам флажок?

3. Я использую объект для хранения и чтения свойств dom только в учебных целях.

Ответ №1:

Поскольку .checked это логическое значение, а не объект, когда вы говорите isChecked: document.querySelector("input").checked , что просто устанавливаете isChecked текущее значение element.checked . Создайте isChecked функцию, чтобы получать фактическое значение каждый раз, когда вам это нужно.

 var x = {  isChecked: () =gt; document.querySelector("input").checked };   function getX() {  (x.isChecked() ? console.log("checkbox is checked") : console.log("checkbox is not checked")); }

 lt;input type="checkbox"gt; lt;button onclick="getX()"gt;is the checkbox checked?lt;/buttongt;

В качестве альтернативы, если вы хотите продолжать использовать его с isChecked или без isChecked() , и вы хотите иметь возможность установить его вручную с помощью этой переменной, вы можете использовать геттеры и сеттеры, подобные этому:

 var x = {  get isChecked() {  return document.querySelector("input").checked;  },    set isChecked(checked) {  return document.querySelector("input").checked = checked;  } };   function getX() {  (x.isChecked ? console.log("checkbox is checked") : console.log("checkbox is not checked")); }

 lt;input type="checkbox"gt; lt;button onclick="getX()"gt;is the checkbox checked?lt;/buttongt; lt;button onclick="x.isChecked = false"gt;unchecklt;/buttongt; lt;button onclick="x.isChecked = true"gt;checklt;/buttongt;

1. Возможно, было бы полезно кратко объяснить функции стрелок в вашем ответе.

2. Существует множество объяснений функций стрелок. В этой простой форме вместо того, чтобы говорить function() { return document.querySelector("input").checked; } , вы можете просто сказать () =gt; document.querySelector("input").checked , так как они не являются аргументами, и вы хотите неявное return