Интересно, почему я не могу заставить document.getElementById("my_div").innerHTML
обновить DOM, когда я переназначаю переменную. Например:
<div id="my_div" onclick="clicky();">
Bye.
</div>
<script type="text/javascript" charset="utf-8">
function clicky() {
var myDivValue = document.getElementById("my_div").innerHTML;
myDivValue = "Hello";
console.log(myDivValue);
}
</script>
В журнале я вижу, что переменная перераспределяется при нажатии, но innerHTML my_div остается неизменным. Почему это?
После нескольких лет опыта...
Для тех, кто только начинает (как и я) и спрашивает об одном и том же, есть два важных понятия, которые необходимо понять:
- Присвоить по ссылке: Моя ошибка заключалась в том, что я думал, что
var myDivValue = element.innerHTML
создаст ссылку/адрес для innerHTML, и каждый раз, когда я назначал новое значение этой ссылке, я мог просто обновлять контент, но не то, как он работает. - Назначить по значению: Вместо этого я просто делал копию значения
element.innerHTML
(которое было пустым) и назначал значение дляmyDivValue
, затем вmyDivValue = "Hello";
я назначал новое значение дляmyDivValue
так что, конечно, он никогда не обновитelement.innerHTML
.
Непонятная часть: при использовании оператора присваивания (=
) в JS не очевидно, что вы либо присваиваете ссылку или значение (var referenceName = reference_to_thing
против var containerName = newValue
),
Как многие говорили в ответах, правильный способ сделать это - назначить элемент document.getElementById("my_div")
для myDiv
:
var myDiv = document.getElementById("my_div")
И теперь, когда у меня есть ссылка на элемент с именем myDiv
, я могу обновлять свойство innerHTML
всякий раз, когда мне нравится:
myDiv.innerHTML = "Hello" // innerHTML is now "Hello"
myDiv.innerHTML = "Goodbye" // Changed it to "Goodbye"