ブラウザ内のコンテンツが描写されてからpromptを表示させたい

個人的にブラウザ内のコンテンツが表示されてから、proptウィンドウを表示させて、それからtextContentで内容を書き換える方が美しいと感じて、それを実装しようとしています。

この場合、window, documentでは無いと思おうのですが、どうしたら実現できるでしょうか？

JavaScript
1<!doctype html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width,initial-scale=1">
7    <title>テンプレート</title>
8    <link href="./_common/images/favicon.ico" rel="shortcut icon">
9    <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
10    <link href="./_common/css/style.css" rel="stylesheet">
11</head>
12
13<body>
14    <header>
15        <div class="container">
16            <h1>タイトル</h1>
17            <h2>サブタイトル</h2>
18        </div><!-- /.container -->
19    </header>
20    <main>
21        <div class="container">
22            <section>
23                <p id="choice"></p>
24            </section>
25        </div><!-- /.container -->
26    </main>
27    <footer>
28        <div class="container">
29            <p>JavaScript Samples</p>
30        </div><!-- /.container -->
31    </footer>
32    <script>
33        'use strict'
34        const answer = window.prompt('Write something here')
35        document.getElementById('choice').textContent = answer
36    </script>
37</body>
38
39</html>

行動規範の内容に同意します

回答1件

2回目のrequestAnimationFrame()ハンドラ内では画面描画されていることが保証されます。
(注: load イベントハンドラでは画面描画されている保証はありません)

javascript
1requestAnimationFrame(() => {
2  requestAnimationFrame(() => {
3    const answer = window.prompt('Write something here')
4    document.getElementById('choice').textContent = answer;
5  });
6});