javascriptで2つの動作を実行させたい

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<title>おみくじ</title>
5
6</head>
7<body>
8<h1>おみくじ</h1>
9<input type=button value="おみくじスタート" onclick="onButtonClick()">
10<div id="dsp"></div>
11
12    <script>
13       let kujis =["大吉","吉","中吉","小吉","末吉","凶","大凶"];
14       let kuji = Math.floor(Math.random()*kujis.length);
15       let disp = document.getElementById("dsp");
16       
17       function onButtonClick(){
18             dsp.innerHTML = kujis[kuji];
19             
20             }
21　　
22    </script>
23
24</body>
25</html>

javascriptで以前に質問させていただいた「おみくじ」を表示させる記述ですが、おみくじの結果である「大吉・吉・・・。」だけを赤文字で表示させることはできるでしょうか？
スクリプトの2行目の後に　let kuji = style.color="red";
を入れてもダメでした。調べましたが、よく分かりませんでした。
よろしくお願いします。

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

回答2件

ベストアンサー

スクリプトの2行目の後に　let kuji = style.color="red";

を入れてもダメでした

kuji は kujis の配列添字をランダムに生成した値（{number}）ですので、style を指定するのではなく、 kuji < 2 のような条件式に使うべき変数です。

javascript
1console.log( kuji, kujis[kuji] ); // ページを開いた時点で結果が出ている。
2
3function onButtonClick() {
4  dsp.innerHTML = kujis[kuji];
5  if( kuji < 2 ) { // 大吉、吉 のときだけ赤くする例
6    dsp.style.color = "red";
7  }
8}
9

投稿2020/04/20 23:11

編集2020/04/20 23:17

AkitoshiManabe

総合スコア5432

beginner001

2020/04/21 06:30

なるほどという感じでした。ありがとうございます。

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

こちらでいかがでしょうか?

大吉、吉、中吉、小吉、末吉、凶、大凶が、どの文字でもすべて赤色になる前提です。
大吉と吉だけ赤にしたいのであればAkitoshiManabeさんの回答を参考にしてください。

js
1<script>
2  let kujis = ["大吉", "吉", "中吉", "小吉", "末吉", "凶", "大凶"];
3  let kuji = Math.floor(Math.random() * kujis.length);
4  let disp = document.getElementById("dsp");
5
6  // 追加しました
7  dsp.style.color = "red";
8
9  function onButtonClick() {
10    dsp.innerHTML = kujis[kuji];
11  }
12</script>