Q&A
「別関数にreturnで渡したい」とありますが、具体的に渡す関数を提示してください。
前提・実現したいこと
入力できるダイアログをバニラjavascriptで作っています。
ダイアログを動的に生成・表示させたいため、<dialog> <form> <input>をcreateElement()で定義しています。
モーダルダイアログを作ろうと思っているのですが、その際に<input>の値をreturnで返すことができません。
追記
タイトルの「別関数」は、下記ソースコードのmain()です。
説明不足でした。
申し訳ありません。
お力添えよろしくお願いします。
発生している問題・エラーメッセージ
値をreturnで受け渡しすることができない。
該当のソースコード
html
1<!DOCTYPE html> 2 3<html> 4 5<head> 6 <script> 7 // メイン 8 function main() { 9 var foo = createDialog(); 10 console.log(foo); // これはコンソールで確認できない 11 } 12 13 // 入力ダイアログを作る関数 14 function createDialog() { 15 // 要素の定義 16 var dialog = document.createElement("dialog"); 17 dialog.id = "dialog"; 18 19 var form = document.createElement("form"); 20 form.method = "dialog"; 21 22 var input = document.createElement("input"); 23 input.id = "input"; 24 25 // 要素を追加 26 form.appendChild(input); 27 dialog.appendChild(form); 28 document.body.appendChild(dialog); 29 30 // dialogをモーダル表示する 31 var moge = document.getElementById("dialog"); 32 moge.showModal(); 33 34 // <input>の値をreturnしたい... 35 moge.addEventListener("close", () => { 36 var hoge = document.getElementById("input").value; 37 console.log(hoge); // これはコンソールで確認できる 38 return hoge; // これはコンソールで確認できる 39 }); 40 } 41 </script> 42</head> 43 44<body onLoad="main()"> 45</body> 46 47</html>
試したこと
追記
hogeをグローバルに定義し、<input>の値を格納してみましたが表示されませんでした。
html
1<!DOCTYPE html> 2 3<html> 4 5<head> 6 <script> 7 var hoge; // hogeをグローバルで定義 8 // メイン 9 function main() { 10 createDialog(); 11 console.log(hoge); // これはコンソールで確認できない 12 } 13 14 // 入力ダイアログを作る関数 15 function createDialog() { 16 // 要素の定義 17 var dialog = document.createElement("dialog"); 18 dialog.id = "dialog"; 19 20 var form = document.createElement("form"); 21 form.method = "dialog"; 22 23 var input = document.createElement("input"); 24 input.id = "input"; 25 26 // 要素を追加 27 form.appendChild(input); 28 dialog.appendChild(form); 29 document.body.appendChild(dialog); 30 31 // dialogをモーダル表示する 32 var moge = document.getElementById("dialog"); 33 moge.showModal(); 34 35 // <input>の値をreturnしたい... 36 moge.addEventListener("close", () => { 37 hoge = document.getElementById("input").value; // グローバル変数に値を格納 38 }); 39 } 40 </script> 41</head> 42 43<body onLoad="main()"> 44</body> 45 46</html>
補足情報（FW/ツールのバージョンなど）
- 使用ブラウザはchrome最新版です
- electronを使っているため、prompt()が禁止されています
回答2件
0
ベストアンサー
createDialog内のmogeのcloseを待って処理したいなら
promiseするのが妥当
投稿2020/05/07 13:10
総合スコア114839
<script>
function main() {
createDialog().then(foo=>{;
console.log(foo);
});
}
async function createDialog() {
return new Promise(resolve=>{
var dialog = document.createElement("dialog");
dialog.id = "dialog";
var form = document.createElement("form");
form.method = "dialog";
var input = document.createElement("input");
input.id = "input";
form.appendChild(input);
dialog.appendChild(form);
document.body.appendChild(dialog);
var moge = document.getElementById("dialog");
moge.showModal();
moge.addEventListener("close", () => {
var hoge = document.getElementById("input").value;
resolve(hoge);
});
});
}
</script>
<body onLoad="main()">
</body>
回答ありがとうございます。
いただいたコードで希望の動作を実装することができました！
「closeが呼び出されるのはユーザが入力されてからで、それより前にmain()のconsole.log()が実行されるから表示されない」「そこで、処理の順番を指定するPromise（←間違ってたらごめんなさい）を使用して、closeが呼び出されるまでmain()のconsole.log()が実行されないようにする」という問題の原因も教えていただき、ありがとうございました。
また、再び回答してもらってありがとうございます！
とても助かりました。
あなたの回答
tips
プレビュー
