document.getElementById('id').textContentが出力されない原因がわからない

前提・実現したいこと

numberとanswerが一致しない場合に.textContentでanswerが大きすぎるか小さすぎるかを<p id="choice"></p>に出力したいのですが、出力されません。

発生している問題・エラーメッセージ

なし

該当のソースコード

HTML
1<!doctype html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width,initial-scale=1">
7    <title>テンプレート</title>
8    <link href="./_common/images/favicon.ico" rel="shortcut icon">
9    <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
10    <link href="./_common/css/style.css" rel="stylesheet">
11</head>
12
13<body>
14    <header>
15        <div class="container">
16            <h1>タイトル</h1>
17            <h2>サブタイトル</h2>
18        </div><!-- /.container -->
19    </header>
20    <main>
21        <div class="container">
22            <section>
23                <p id="choice"></p>
24            </section>
25        </div><!-- /.container -->
26    </main>
27    <footer>
28        <div class="container">
29            <p>JavaScript Samples</p>
30        </div><!-- /.container -->
31    </footer>
32    <script>
33        'use strict'
34        const number = Math.floor((Math.random() * 10) + 1)
35        console.log('Number: ' + number)
36        let answer = window.prompt('Input Number')
37        while (parseInt(answer) !== number) {
38            answer = window.prompt('Input Number')
39            console.log('Answer: ' + answer)
40            if (answer > number) {
41                document.getElementById('choice').textContent = 'Your number is bigger than the number'
42            } else if (answer < number) {
43                document.getElementById('choice').textContent = 'Your number is smaller than the number'
44            } else {
45                document.getElementById('choice').textContent = 'Input number'
46            }
47        }
48        document.getElementById('choice').textContent = 'Good!'
49    </script>
50</body>
51
52</html>

以下のように、

<p id="choice"></p>に

document.getElementById('choice').textContent = 'Your number is bigger'
document.getElementById('choice').textContent = 'Your number is smaller than the number'
document.getElementById('choice').textContent = 'Input number'


上記メッセージが表示されません

### 補足情報（FW/ツールのバージョンなど）

Vscode
Windows10

m.ts10806

2021/03/07 23:35

何も出力されないですか？それとも他のことが起きてますか？具体的に現象を記載してください

kalon

2021/03/08 02:23

何も出力されません。上記に情報を掲載したのでご覧に入れていただけたら幸いです。

m.ts10806

2021/03/08 02:33

「何も出力されない」が再現しないので困ってます。入力してOK押してますよね？私が回答に書いたとおり、プロンプト2回出るので２回目まで入力しないと何も処理は入りません

m.ts10806

2021/03/08 02:34

いったんCSS外して確認してみては

kalon

2021/03/08 02:35

わかりました。

kalon

2021/03/08 06:43

やってみましたがダメですね。 document.getElementById('choice').textContent = 'Your number is bigger' document.getElementById('choice').textContent = 'Your number is smaller than the number' document.getElementById('choice').textContent = 'Input number' これらがmacOSのChromeで描写されません。

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

回答3件

ブラウザによるかもしれませんが、whileループの間はHTMLのイベントループに戻ることがなくてtextContentの変更が画面に出ていないのかもしれません。

whileループの内部の最後にdocument.getElementById('choice').offsetWidth;を入れると強制描画されるかもしれません。

投稿2021/03/08 01:54

int32_t

総合スコア21679

kalon

2021/03/08 01:54

勉強になります！

kalon

2021/03/08 06:43

macOSのChromeですが、 document.getElementById('choice').textContent = 'Your number is bigger' document.getElementById('choice').textContent = 'Your number is smaller than the number' document.getElementById('choice').textContent = 'Input number' は描写されません。

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

場合分けをもう少し増やしたほうがよいでしょう

javascript
1<p id="choice"></p>
2<script>
3const min=1;
4const max=3;
5const number = Math.floor((Math.random() * max) +min);
6const choice=document.getElementById('choice');
7let txt;
8let answer;
9let flg=false;
10while (!flg) {;
11  answer = window.prompt('Input Number');
12  if (answer == null) {;
13    txt='Cancel';
14    flg=true;
15  }else if (answer=="" || isNaN(answer)) {;
16    txt='Please input Number';
17  }else if (parseInt(answer) < min) {;
18    txt='Too Small';
19  }else if (parseInt(answer) > max) {;
20    txt='Too Big';
21  }else if (parseInt(answer) == number) {;
22    txt='Good';
23    flg=true;
24  }else if (answer > number) {
25    txt='Your number is bigger than the number';
26  }else{
27    txt='Your number is smaller than the number';
28  }
29  document.getElementById('choice').textContent = txt;
30}
31
32</script>
33