if文で新しい文字と色の変更を同時にreturnしたいです。

Question

現在、ボタンをクリックする度に大吉や中吉などを返してくれるプログラムを書いています。
その中でクリックする度にランダムに値を返すことは出来るのですが、同時に値のfontColorを変えられずに困っています。
最初if文内にreturnを二つ書いてみたのですが、実行されませんでした。
次に色だけ変えてみようと思い下記のコードだけreturnしてみたら値に赤文字のredが返ってくるようになってしまいました。
document.getElementById('id').sytle.color = "red";

どなたか解決方法を教えて頂けないでしょうか？
よろしくお願いいたします。

<div id="id"></div>
<button id="btn"></button>

document.getElementById('btn').onclick = function(){
function func(){
  var ran = Math.random() * 10;
  var sum = Math.floor(ran) % 3;
  if(sum == 0){
  	
  	return document.getElementById("id").style.color="red";
  }else if(sum == 1){
  	return "中吉";
  }else{
  	return "吉";
  }
  }
	document.getElementById("id").innerHTML = func();
}

Comments

[m.ts10806]

ファイルが別なのでしたらコードブロック分けてもらえたらと
※原則「コピペで再現できること」です。

[katopa165]

アドバイス頂きありがとうございます。
変更いたします。

[m.ts10806]

sum==0のときは何をしたいのでしょうか

[katopa165]

sum==0の時は赤文字で大吉と返したいです。
ご回答いただきありがとうございます。

Answer 1

出目の出現確率の調整とかあるのでしょうか？
普通にやるなら文字と背景色の組み合わせで配列を設定しておけばよいでしょう

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#btn').addEventListener('click',function(){
    var ran = parseInt(Math.random()*3);
    var list=[
      {"text":"大吉","bgColor":"red"},
      {"text":"中吉","bgColor":"yellow"},
      {"text":"吉","bgColor":"lime"},
      ];
    document.querySelector("#id").textContent=list[ran]["text"];
    document.querySelector("#id").style.backgroundColor=list[ran]["bgColor"];
  });
});
</script>

<div id="id"></div>
<button id="btn">button</button>

Comments

[katopa165]

回答ありがとうございます。
自分には知らないメソッドが多いので一つずつ調べて使えるようにしたいと思います。
またよろしくお願いいたします。

Answer 2

ちょっと意味がわからないので的外れだったらすみません。
まず、乱数発生部分ですが特別な意図がなければvar sum = Math.floor( Math.random() * 10) ;で良いのでは？
で本題でreturn "<span style=color:red;>大吉</span>";という風に指定すれば良いのでは？

<div id="id"></div>
<button id="btn"></button>

document.getElementById('btn').onclick = function(){
  function func(){
    var sum = Math.floor( Math.random() * 10) ;
    if(sum == 0){
      retuen "<span style=color:red;>[大吉とか？]</span>";
    }else if(sum == 1){
      return "中吉";
    }else{
      return "吉";
    }
  }
  document.getElementById("id").innerHTML = func();
}

Codepen - ソース
Codepen - フルビュー

Comments

[katopa165]

回答頂きありがとうございます。
var sum = Math.floor( Math.random() * 10) ;
上記の書き方を知らなかったので今後使っていこうと思います。

Answer 3

returnしているからですね。
私も初めて知ったのですが、document.getElementById("id").style.color="red"で返される結果って式のtrue/falseじゃなくおさめた文字そのものだったんですね。

console.log(document.getElementById("id").style.color="red");

本題：

return document.getElementById("id").style.color="red";

これだと#idにstyle=color:redを付与したうえでredという文字を返していることになります。

何をしたいのかによりますが、document.getElementById("id").style.color="red"だけで1つの指示が成り立っているので、returnする必要ありません。

document.getElementById("id").style.color="red";
return "表示したい文字列";

あとは、出目に対して何の色にしたいかで決めてください。
※ただし、念のためfunc()冒頭で色の解除(初期化）はしておいたほうが良いです。

ただ、冗長なコードになるので、出目と対応する色を配列に持っておいて取り出すのが良いと思います。