在第二次运行该函数之前，无法更新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 + '"' + '>')
});