javascript - たった1つのボタンでファイルからテキストをロードする方法は?

Question

文字置換を使用してメッセージの暗号化/復号化ページをコーディングしようとしています。キーをファイルに保存できたので、再度ロードしたいと思います。これでキーを正常にロードできました：

    <script>
    function loadkey () {
    var keyToLoad = document.getElementById("keyToLoad").files[0];
    var keyReader = new FileReader();
    keyReader.onload = function(keyLoadEvent)
    {
        var keyFromFileLoaded = keyLoadEvent.target.result;
        document.getElementById("key").value = keyFromFileLoaded;
    };
    keyReader.readAsText(keyToLoad, "utf-8");
}
</script>

<h3>Put your key here</h3>
<textarea id="key" cols="30" rows="1"></textarea>
<br>
<button onclick="genKey()">Generate  key</button>
<button onclick="savekey()">Save key</button>
<input type="file" id="keyToLoad">
<button onclick="loadkey()">Load key</button>

しかし、ファイルの選択ボタンとキーの読み込みボタンを別々に使用すると、本当にばかげているように見えます。したがって、入力ボタンを非表示にして、[キーの読み込み] ボタンをクリックしてトリガーします。

<script>
    function handleChooseKey()
{
    document.getElementById("keyToLoad").click();
}

function loadkey () {
    var keyToLoad = document.getElementById("keyToLoad").files[0];
    var keyReader = new FileReader();
    keyReader.onload = function(keyLoadEvent)
    {
        var keyFromFileLoaded = keyLoadEvent.target.result;
        document.getElementById("key").value = keyFromFileLoaded;
    };
    keyReader.readAsText(keyToLoad, "utf-8");
}
</script>

<h3>Put your key here</h3>
<textarea id="key" cols="30" rows="1"></textarea>
<br>
<button onclick="genKey()">Generate  key</button>
<button onclick="savekey()">Save key</button>
<input type="file" id="keyToLoad" style="display:none;">
<button onclick="handleChooseKey();loadkey();">Load key</button>

私の問題は、キーファイルがロードされた直後に loadkey() 関数を機能させることができないため、次のクリックまでキーがロードされないことです。私を助けてください。ありがとうございました ：）