window.confirm()で配列を改行して表示することに躓いてしまったので、そのメモを残します。
やりたかったことは「警告メッセージは配列のデータを一列ではなく、改行して表示したい。」でした。
①うまく表示できなかった時
実行すると、何も加工していないので配列の形のまま表示されていました。（まあそうですよね。。。）
ちなみにwindow.confirm()は、onsubmitの部分でreturnで返す形にしないと「キャンセル」をクリックした場合でもサブミットしてしまうので注意です。
＜画面＞
＜ソースコード＞
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<form onsubmit="return checkWarnings()">
<div>
<label for="example">window.confirmの練習です。文字を入れて「送信」ボタンを押してください！→</label>
<input id="example" type="text" name="text">
</div>
<div>
<input type="submit" value="送信">
</div>
</form>
<script>
function checkWarnings() {
var warnings = ['実行しますか？', '本当に実行しますか？', '実行して後悔はないですか？'];
if(!window.confirm(warnings)){
return false;
}
}
</script>
</body>
</html>
②うまく表示できたとき
改行コード「\r\n」をforEach文で回して詰め込むことによって解決できました。
改行コード「\n」をforEach文で回して詰め込むことによって解決できました。
2022/04/22追記：「\r\n」より「\n」を使用する方がトラブルが少ないとのなので、「\n」に修正しました。
＜画面＞
＜ソースコード＞
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<form onsubmit="return checkWarnings()">
<div>
<label for="example">window.confirmの練習です。文字を入れて「送信」ボタンを押してください！→</label>
<input id="example" type="text" name="text">
</div>
<div>
<input type="submit" value="送信">
</div>
</form>
<script>
function checkWarnings() {
var warnings = ['実行しますか？', '本当に実行しますか？', '実行して後悔はないですか？'];
+ var formatWarnings = '';
+ warnings.forEach(function(element){
+ formatWarnings += element + '\n';
+ });
- if(!window.confirm(warnings)){
+ if(!window.confirm(formatWarnings)){
return false;
}
}
</script>
</body>
</html>
改行コードをループで回すことがなく戸惑ってしまいましたが、また一つ勉強になりました。
追記：スマートな書き方
ループ分で回していましたが、joinを使うことでスマートに書けました。
function checkWarnings() {
var warnings = ['実行しますか？', '本当に実行しますか？', '実行して後悔はないですか？'];
if(!window.confirm(warnings.join('\n'))){
return false;
}
}