Не могу обновить DOM, пока я не запустил функцию во второй раз. Попытка присвоить x пути к файлу выбранного файла

Question

Всякий раз, когда я нажимаю кнопку addImage, она запускает нижеприведенную функцию, и моя цель состоит в том, чтобы она обновила переменную x, но она не будет обновлять переменную при первом запуске функции. Однако, как только я снова нажимаю кнопку addImage, x обновляется, и я просто запутываюсь, почему он не обновляется при первом запуске функции.

<input type="button" value="&#9776" id="centerText" />
<input type="button" value="&#128279;" id="addLink" />
<input type="button" value="&#x1f4f7" id="addImage" />
<input type="button" value="&#x2026" id="addImageLink" />
<input type="file" id="my_file" />    


$("#addImage").click(function () {
    document.getElementById('my_file').click();
    var x = document.getElementById("my_file").value;
    document.getElementById('demo').innerHTML = x;
    wrapText("<img src=" + '"' + x + '"' + '>')
});