ランダムなアルファベットを書いては消すを繰り返すという処理を表示させる方法を教えてください。

###前提・実現したいこと
変数onIntervalでランダムの文字列を生成して、変数onTimeoutでその文字列を消す、この処理を繰り返し画面中央に表示という一連の流れを実装したいと思います。

###発生している問題・エラーメッセージ
ランダム処理を書いては消すという処理を、下記のコードのように書いてみたのですが、表示自体がうまくいきません。どこが間違っているのか教えてくだされば幸いです。
また、この処理を画面中央で表示したいのですが、cssの定義も曖昧なので、添削いただければと思います。

###該当のソースコード

<HTML,SCRIPT内>

<body> <script> var num=0; var timerID=setInterval(function(){ document.getElementById('pp').innerHTML+=ran()+"<br>"; num++; },300); function(){ var onInterval = function(){ console.log( function ran(){ var str=""; for(var i=0;i<12;i++){ str+=String.fromCharCode(97+parseInt(Math.random()*26)); } return str; }; }; var interval = setInterval(onInterval,300);

var onTimeout = function(){
clearInterval(interval);
}
setTimeout(onTimeout,300*10 + 1);
}();
return str
</script>

</body>


<CSS内>

.str{position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
}


###補足情報(言語/FW/ツール等のバージョンなど)
以前の質問で、指定文字数のランダムを生成することは理解しました。
ご丁寧にお答えくださった方々ありがとうございます。
この場をお借りしてお礼申し上げます。

kei344

2017/02/18 02:44

質問文のコードはそれぞれ個別にコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、質問テンプレートが一部残っていますので、不要な部分は編集されてはいかがでしょうか。

yud

2017/02/18 03:09

ご指摘ありがとうございます。まだ慣れていなくてすみません。よろしければ解答もよろしくお願いいたします。

Lhankor_Mhy

2017/02/18 04:44

とりあえず、括弧の対応があってないと思いますのでご確認ください。

yud

2017/02/18 04:48

すみません、どの括弧か教えていただいてもよろしいでしょうか。

Lhankor_Mhy

2017/02/18 05:01

javascriptの学習をされているのであれば、今後のためにご自分で確認されることをおすすめします。開発者ツールを使えば何行目でエラーが出ているのか分かると思います。

yud

2017/02/18 05:25

ご指摘ありがとうございます！質問内容を少し変更させていただきました。

Zuishin

2017/02/18 07:27

なぜインデントを書かないのですか？インデントはソースのブロックを明確にし、読みやすくします。括弧の閉じ忘れを発見しやすくする効果もあります。

Lhankor_Mhy

2017/02/18 07:35

変更ありがとうございます。括弧の閉じ忘れをまだ発見できないようですので、答えを書いておきますね。console.logが閉じていません。その他、不明な部分がかなりありますので、がんばってください。

kei344

2017/02/18 15:14

コードブロックの使い方が間違っています。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

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

回答1件

ベストアンサー

このように行うのはいかがでしょう。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        body {
13            text-align: center;
14        }
15
16        #pp {
17            display: inline-block;
18        }
19    </style>
20</head>
21<body>
22<div id="pp"></div>
23<script>
24    var num = 0;
25    var timerID = function () {
26        setInterval(function () {
27            document.getElementById('pp').innerHTML += ran() + "<br>";
28            num++;
29        }, 300);
30    };
31
32    var deleteMoji = function () {
33        setInterval(function () {
34            document.getElementById('pp').innerHTML = "";
35        }, 300 * 10 + 1);
36    };
37
38    timerID();
39    deleteMoji();
40
41    function ran() {
42        var str = "";
43        for (var i = 0; i < 12; i++) {
44            str += String.fromCharCode(97 + parseInt(Math.random() * 26));
45        }
46        return str;
47    }
48</script>
49</body>
50</html>