01.<!DOCTYPE html>
02.<html>
03.<head>
04.<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
05.<meta charset="UTF-8">
06.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
07.<style>
08.pre {
09. padding: 20px;
10.}
11.</style>
12.<script>
13.function test1() {
14. var wareki = ["明治", "大正", "昭和", "平成", "令和"];
15.
16. var text = "";
17.
18. for( var i = 0; i < wareki.length; i++ ) {
19. text += i + " => " + wareki[i] + "\n";
20. }
21.
22. document.getElementById("text1").innerText = text;
23.}
24.function test2() {
25. var wareki = ["明治", "大正", "昭和", "平成", "令和"];
26.
27. var text = "";
28.
29. wareki.forEach( function(value, i){
30. text += i + " => " + value + "\n";
31. });
32.
33. document.getElementById("text2").innerText = text;
34.}
35.</script>
36.</head>
37.<body>
38.
39.<div>
40. <input type="button" value="実行1" onclick="test1()">
41. <input type="button" value="実行2" onclick="test2()">
42.</div>
43.
44.<pre id="text1">
45.</pre>
46.<pre id="text2">
47.</pre>
48.
49.</body>
50.</html>