68459


JavaScriptで「〜な大吉」といった１５種類程のおみくじを作成しているのですが「〜な」の箇所だけ小さいフォントに変えて改行して表示させるにはどうすればいいのでしょうか。  
又、画像も一緒に表示させたいです。

下記の形でコードを書いてあります。

[code]

    {
      const btn = document.getElementById(`btn`);
    
      btn.addEventListener(`click` , () => {
        const results = ['〜なa','〜なb','〜なc',,,,,,];
        btn.textContent = results[Math.floor(Math.random() * results.length)];
      });
    }
    
[/code]


CC BY-SA 4.0
2020-07-09T20:35:34.700
68454
2020-07-10T03:42:55.990
2020-07-10T00:35:54.550
3060
40520
question
javascript
JavaScriptで「〜な大吉」といった１５種類程のおみくじを作成しているのですが「〜な」の箇所だけ小さいフォントで改行して表示させるにはどうすればいいのでしょうか。


`textContent`にはテキストだけをセットできて、修飾情報や画像は入れられません。HTMLを組み立てて、`innerHTML`
でセットすればよいでしょう。

[code]

    const btn = document.getElementById('btn');
    
    btn.addEventListener('click', () => {
      const results = [{
        desc: '〜な',
        result: '凶',
        image: 'https://3.bp.blogspot.com/-cPqdLavQBXA/UZNyKhdm8RI/AAAAAAAASiM/NQy6g-muUK0/s400/syougatsu2_omijikuji2.png'
      }, {
        desc: '〜な',
        result: '小吉',
        image: 'https://3.bp.blogspot.com/-cPqdLavQBXA/UZNyKhdm8RI/AAAAAAAASiM/NQy6g-muUK0/s400/syougatsu2_omijikuji2.png'
      }, {
        desc: '〜な',
        result: '大吉',
        image: 'https://3.bp.blogspot.com/-cPqdLavQBXA/UZNyKhdm8RI/AAAAAAAASiM/NQy6g-muUK0/s400/syougatsu2_omijikuji2.png'
      }];
      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}">`;
    });
[/code]

[code]

    .desc {
      font-size: smaller;
      color: darkGray;
    }
    
    .i {
      width: 24px;
    }
[/code]

[code]

    <button type=button id="btn">くりっく</button>
[/code]


CC BY-SA 4.0
2020-07-10T03:42:55.990
68459
2020-07-10T03:42:55.990
3475
68454
answer