時間で表示が変わるようにしたい

Question

前提

時間で表示が変わるようにしたいです。

実現したいこと

「○○時は〇〇です」と時間によって表示を変えたい。

該当のソースコード

javascript

'use strict';

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const date = now.getDate();
const hour = now.getHours();
const min = now.getMinutes();
let ampm = '';
if(hour < 12) {
    ampm = '午前';
} else {
    ampm = '午後';
}

const output = `${year}/${month + 1}/${date} ${ampm}${hour % 12}:${min}`;
document.getElementById('time').textContent = output;

/*const gatieria = `${hour}時はガチエリアです`;
const gatiyagura = `${hour}時はガチヤグラです`; */
/* document.getElementById('now').textContent = nowgame; */


if (3 <= hour && hour <= 5 || 15 <= hour <= 17){
    document.getElementById('nowgame').textContent = `${hour}時はガチホコバトルです`;
    document.write( '<img src="gatihoko.png">' );
}else if(6 <= hour && hour <= 8 ){
    document.getElementById('nowgame').textContent = `${hour}時はガチエリアです`;
    document.write( '<img src="gatieria.png">' );
}else if(9 <= hour && hour <= 11 ) {
    document.getElementById('nowgame').textContent = `${hour}時はガチヤグラです`;
    document.write( '<img src="gatiyagura.png">' );
}else if(12 <= hour && hour <= 14 ) {
    document.getElementById('nowgame').textContent = `${hour}時はガチアサリです`;
    document.write( '<img src="gatiasari.png">' );
}

試したこと

||などの比較演算子でhourを比較。
何時になっても同じ表示になってしまう。

hourを秒単位に直さないといけないでしょうか。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

15 <= hour <= 17

上記のコードは、nerAHfXZjmawuXEさんが想定しているであろう、「hourが15以上で１７以下の判定」にはなりません。
「hourが15以上か」の判定結果(trueまたはfalse)が数値変換（１または０）され、「判定結果が17以下か」が判定されます。
１も０も１７以下なので、判定結果は、２４時間常にtrueとなり、いつも、最初のifの中だけが実行されます。

最初のifの括弧内を以下に修正してみてください。

3 <= hour && hour <= 5 || (15 <= hour && hour <= 17)

Comments

[nerAHfXZjmawuXE]

素早いご回答ありがとうございます。
初めの判定結果で数値変換されてしまうのですね。

if文の中の動きが少し理解できました。ありがとうございます。