68557


都知事選おみくじを作成していてボタンの中に名前も入れて画像をボタンの真下に持ってくるにはどうすればよいでしょうか。  
名前だけフォントを大きくしたいです。

こちらコードです。

[code]

    'use strict';
    
    {
      const btn = document.getElementById(`btn`);
    
      btn.addEventListener(`click` , () => {
        const results = [{
          desc: '現都知事',
          result: '小池百合子',
          image: 'img/makoto.jpg'
        },{
          desc: '新撰組',
          result: '山本太郎',
          image: 'img/makoto.jpg'
        },{
    〜２０名省略・・・・・
        }];
        const resultObj = results[Math.floor(Math.random() * results.length)];
        btn.innerHTML = `<div class="desc">${resultObj.desc}</div>
          <div>${resultObj.result}</div>
          <img class=i src="${resultObj.image}">`;
      });
    
    
    body {
      background: #efefef;
    }
    h1 {
    text-align: center;
    margin: 60px auto;
    font-size: 60px;
    color: #000000
    }
    
    #btn {
      width: 500px;
      height: 500px;
      background: #ef454a;
      border-radius: 50%;
      margin: 30px auto;
      text-align: center;
      line-height: 500px;
      color: #fff;
      font-weight: bold;
      font-size: 30px;
      cursor: pointer;
      box-shadow: 0 20px 0 #d1483e;
      user-select: none;
    }
    
    #btn:hover {
      opacity: 0.9;
    }
    
    #btn:active {
      box-shadow: 0 10px 0 #d1483e;
      margin-top: 70px;
    }
    image {
      width: 300px;
      height: 300px;
    }
    
    .desc {
      font-size: smaller;
      color: #fff;
    }
    
    .i {
      width: 300px;
    }
    
    <!DOCTYPE html>
    <html lang="ja">#
    <head>
      <meta charset="utf-8">
      <title>都知事選 投票ボタン</title>
      <meta name="description" content="東京都知事選挙の若者の投票を上げるためのシステムです。">
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <h1> 都知事選に参加しよう！</h1>
     <div id ="btn">次の都知事は？</div>
      <script src="main.js"></script>
    </body>
    </html>
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/OLZfh.png)](https://i.stack.imgur.com/OLZfh.png)


CC BY-SA 4.0
2020-07-13T05:36:08.617
68543
2020-07-13T12:38:10.607
2020-07-13T05:48:59.867
3060
40520
question
javascript html css
都知事選おみくじを作成していてボタンの中に名前も入れて画像をボタンの真下に持ってくるにはどうすればよいでしょうか。


desc と result が別のタグになっているからです。  
同じタグに入れるようにしてください。

[code]

    btn.innerHTML = `<div class="desc">${resultObj.desc} <br> ${resultObj.result}</div>
                     <img class=i src="${resultObj.image}">`;
    
[/code]


CC BY-SA 4.0
2020-07-13T12:38:10.607
68557
2020-07-13T12:38:10.607
40962
68543
answer