###星の数当てゲーム

乱数で生成される星の数を当てるゲームを制作しており、console.logで出しているので勿論結果はconsoleに出力されるのですが、ブラウザ本体にdocument.write()を使わない方法で出力するにはどうすればよいのでしょうか。
document.getElementById()を使えば多分できると私は思うのですが、使い方があまりよく分かりません。

完成させたい実行画面の例

☆当てゲーム
乱数で星の数を生成するので。その数を予想してください。
startボタン
1回目☆☆☆ 違います
2回目☆☆ 違います
3回目☆☆☆☆☆☆☆ 違います
4回目☆☆☆☆ 当たりです。よかったね！！

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>☆当てゲーム</title>
<script>
window.onload = function()
{
	var start = document.getElementById("start");
    start.onclick = function Start()
    {
        for(var i = 1; i <= 20; i++)
        {
            yosoutemp = prompt("星の数は何個でしょう")
            yosou = yosoutemp * 1;
            var atari = Math.floor(Math.random() * 10) + 1;
            if(yosou >= 1 && yosou <= 10)
            {
                var startemp = ["☆","☆","☆","☆","☆","☆","☆","☆","☆","☆","☆"];
                var star = "";
                var i = 0;
                while(i < yosou)
                {
                    i++;
                    star += startemp[i];
                }
                if(yosou != atari)
                {
                    if(i === 20)
                        console.log(i + "回目" + star + " 残念。ゲームオーバーです。");
                    else
                        console.log(i + "回目" + star + " 違います");
                }
                else
                {
                    console.log(i + "回目" + star + " 当たりです。よかったね！！");
                    break;
                }
            }
            else
            {
                console.log("1~10までを入力してください。");
                
            }
        }
    }
}
</script>
</head>
<body>
<h2>☆当てゲーム</h2>
<h3>乱数で星の数を生成するので、その数を予想してください。</h3>
<button id="start">start</button>
</body>
</html>

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

回答1件

ベストアンサー

ボタンを書き換える？
ちょっと微妙ですね

javascript
1document.getElementById('start').textConent=値;
2//もしくは
3document.querySelector('#start').textConent=値;

みたいなやり方でしょうか？

追記

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(){
3  var start = document.querySelector('#start');
4  var view = document.querySelector('#view');
5  var max=20;
6  start.addEventListener('click',function(){
7    loop:
8    for(var i = 1; i <= max; i++){
9      var atari = Math.floor(Math.random() * 10) + 1;
10      console.log(atari);
11      while(1){
12        var yosoutemp = prompt('星の数は何個でしょう');
13        if(yosoutemp === null){
14          alert('中断しました！');
15          break loop;
16        }
17        var yosou = parseInt(yosoutemp);
18        if(yosou >= 1 && yosou <= 10) break;
19        alert('1~10までを入力してください。');
20      }
21      var star='☆'.repeat(yosou);
22      var div=document.createElement('div');
23      if(atari==yosou){
24        div.textContent=i + '回目' + star + ' 当たりです。よかったね！！';
25        view.appendChild(div);
26        break;
27      }else if(i === max){
28        div.textContent=i + '回目' + star + ' 残念。ゲームオーバーです。';
29        view.appendChild(div);
30      }else{
31        div.textContent=i + '回目' + star + ' 違います';
32        view.appendChild(div);
33      }
34    }
35  });
36});
37</script>
38</head>
39<body>
40<h2>☆当てゲーム</h2>
41<h3>乱数で星の数を生成するので、その数を予想してください。</h3>
42<button id='start'>start</button>
43<div id="view"></div>