Разница между сохранением элемента переменной и просто вызовом document.getElementByID()

Question

Я понимаю, что название не имеет большого смысла, но я не уверен, как еще выразить свой вопрос. Я пытаюсь узнать о добавлении событий к кнопкам в JavaScript, и я столкнулся с ошибкой, которую я не могу понять. Вот два фрагмента кода (оба из которых находятся внутри функции window.onload):

Это один работает:

document.getElementById("button").onclick = function func() { 
    document.getElementById("testParagraph").innerHTML = "I changed the text"; 
} 

Это один не делает:

var button = document.getElementById("button"); 
button.onclick = document.getElementById("testParagraph").innerHTML = "I changed the text"; 

и вот HTML:

<p id="testParagraph"> This <strong> is </strong> a test </p> 
<button id="button">Run Test</button> 

По работе, я имею в виду первый один показывает абзац «Это тест», пока я не нажать когда он меняет его на «Я изменил текст». Второй не работает, потому что он загружает «Я изменил текст», как только страница загружается, а не ждет нажатия кнопки. Поскольку я новичок в JavaScript, они выглядят одинаково для меня, я получаю кнопку, используя свой идентификатор, а затем добавляю прослушиватель событий onclick. Просто вторая назначает кнопку переменной, а первая просто захватывает ее с помощью getElementById. Оба выполнялись внутри функции window.onload. Может ли кто-нибудь помочь мне увидеть разницу?

EDIT: Я изменил вторую часть кода на следующую и работал правильно.

var buttonX = document.getElementById("button"); 
buttonX.onclick = function clicked() { 
    document.getElementById("testParagraph").innerHTML = "I changed the text"; 
} 

Answer 1

Вы должны обернуть свой обратный вызов onclick в функции. Вы не можете просто написать команды, как вы делали

var button = document.getElementById("button"); 
button.onclick = function(){ 
    document.getElementById("testParagraph").innerHTML = "I changed the text"; 
}; 

Сохранение ссылки на элемент в переменной или нет, не имеет никакого влияния здесь.