<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ループ</title>
</head>
<body>
<h1>連呼プログラム</h1>
<form id="form">
何回連呼しますか？
<input type="number" name="num" id="num" max="10" min="0">
<div><button type="button" onclick="print_loops(this)">決定</button></div>
</form>
<div id="output"></div>
<script>
function print_loops(element){
var num = parseInt(element.form.elements['num'].value,10);
if(isNaN(num)){
num = 0;
}
//while1ループ☆
var while1_loops_str = "";
var count = 0; //count変数の初期化
(count < num){
while1_loops_str += '<p>' + (count+1) + "大嫌い!(while)</p>\n";
count++;
}
//while2ループ
var while2_loops_str = "";
count = 0; //count変数の初期化
while(true){ //無限ループ
if(count >= num){ //countがnum以上になったら
break; //ループから抜ける
}
while2_loops_str += '<p style="font-size:1.2em">' + (count+1) + "大嫌い!(while,break)</p>\n";
count++; //count変数インクリメント
}
//do-whileループ
var do_while_loops_str = "";
count = 0;; //count変数の初期化
do{
do_while_loops_str += '<p style="font-size:1.5em">' + (count+1) + "大嫌い!(do-while)</p>\n";
count++; //count変数インクリメント
}while(count < num);
//forループ☆
var for_loops_str = "";
(var i = 0; i < num; i++){ //count変数(ここではi)の初期化からインクリメントまで1行で書ける
for_loops_str += '<p style="font-size:1.8em">' + (i+1) + "大好き!(for)</p>\n";
}
document.getElementById("output").innerHTML = while1_loops_str + while2_loops_str + do_while_loops_str + for_loops_str;
}
</script>
</body>
</html>