Javascript 自作ダイアログの作成

以下のコードの prompt を自作のダイアログで実現させたいです。

html
1<body>
2
3    <input type="button" id="open" value="ダイアログを開く">
4
5    <script>
6
7        const btn_dialog = document.getElementById('open');
8        let value = null;
9
10        btn_dialog.addEventListener("click", function(){
11            console.log("dialog-open clicked");
12            let value = prompt("文字列を入力");
13            console.log(value);
14        }, false);
15
16    </script>
17    
18</body>

promise をうまく使えば実現できると思い、下記のコードに至りましたが思ったように動作しません。
(下図の「end_value」は「関数内でのvalue」のあとに表示させたいのです)
よい方法はないものでしょうか？
よろしくお願いいたします。

html
1<body>
2
3    <dialog>
4        <p>文字列を入力</p>
5        <input id="input_str"><br>
6        <button id="ok" onclick="">OK</button>
7    </dialog>
8
9    <input type="button" id="open" value="ダイアログを開く">
10
11    <script>
12
13        const dialog = document.querySelector('dialog');
14        const btn_dialog = document.getElementById('open');
15        const btn_ok = document.getElementById('ok');
16        let value = null
17
18        function my_prompt() {
19                    
20            function func1(){
21                dialog.showModal()
22                return sample = new Promise(function(resolve, reject){
23                    btn_ok.addEventListener('click', function(){
24                    dialog.close()
25                    resolve()
26                    })
27                })    
28            }
29
30            func1().then(function(resp){
31                value = document.getElementById('input_str').value
32                console.log('関数内でのvalue: ' + value)
33                return value
34            })
35        }
36            
37        btn_dialog.addEventListener("click", function(){
38            console.log("dialog-open clicked");
39            value = my_prompt()
40            console.log('end_value: ' + value) // ← ここは my_prompt() でOKボタンがクリックされるまで実行されないようにしたい.
41        }, false);
42
43    </script>
44</body>

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

回答2件

ベストアンサー

my_prompt() を、Promiseを返す関数とし、呼び出し側はawaitで受けるようにしてはいかがでしょうか。

js
1        async function my_prompt() {
2            function func1(){
3                dialog.showModal()
4                return sample = new Promise(function(resolve, reject){
5                    btn_ok.addEventListener('click', function(){
6                    dialog.close()
7                    resolve()
8                    })
9                })    
10            }
11
12            return func1().then(function(resp){
13                value = document.getElementById('input_str').value
14                console.log('関数内でのvalue: ' + value)
15                return value
16            });
17        }
18            
19        btn_dialog.addEventListener("click", async function(){
20            console.log("dialog-open clicked");
21            const value = await my_prompt()
22            console.log('end_value: ' + value);
23        }, false);
24

投稿2022/04/30 01:48

退会済みユーザー

総合スコア0

sgry

2022/04/30 04:19

ありがとうございます。思った通りに動作しました！

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

質問に記載のコードを意図通り動くようにしたらこうなるけど、読み辛いからasync/await使って書いた方が良いと思いますよ

<body>

    <dialog>
        <p>文字列を入力</p>
        <input id="input_str"><br>
        <button id="ok" onclick="">OK</button>
    </dialog>

    <input type="button" id="open" value="ダイアログを開く">

    <script>

        const dialog = document.querySelector('dialog');
        const btn_dialog = document.getElementById('open');
        const btn_ok = document.getElementById('ok');
        let value = null

        function my_prompt() {
                    
            function func1(){
                dialog.showModal()
                return sample = new Promise(function(resolve, reject){
                    btn_ok.addEventListener('click', function(){
                    dialog.close()
                    resolve()
                    })
                })    
            }

            return func1().then(function(resp){
                value = document.getElementById('input_str').value
                console.log('関数内でのvalue: ' + value)
                return value
            })
        }
            
        btn_dialog.addEventListener("click", function(){
            console.log("dialog-open clicked");
            my_prompt().then((value)=>console.log('end_value: ' + value))
             // ← ここは my_prompt() でOKボタンがクリックされるまで実行されないようにしたい.
        }, false);

    </script>
</body>

投稿2022/04/30 01:44