Переключить элементы dom в зависимости от того, какой оператор if выполняется

Я работаю над проектом JavaScript, который приветствует вас по-разному в зависимости от по времени суток он находится в режиме реального времени.

Например, если часов меньше 12, он скажет "доброе утро". Но мне не хватает одной вещи, которую я не знаю, как добавить.

Я хочу, чтобы появилась кнопка и, возможно, разные div, в зависимости от того, какие if / if else выполняется инструкция. Например, если сейчас утро, я пытаюсь отобразить кнопку «Сварить кофе», «Включить телевизор», если сейчас день, и т. д.

Проблема в том, что я понятия не имею, как это сделать.

<!DOCTYPE html>
<html>
<head>
    <title>Greeting | Test</title>
</head>
<body align="center">

<style>

</style>

<script>

var Name = prompt("Hello! What is your name?");

var d = new Date();
var hour = d.getHours();
var min = d.getMinutes();
var hourAd = hour - 12;


if(hour < 12){ //target if statement to toggle button
   document.write("Good Morning , " + Name + "." +
                   "<br /> It is currently " +
                    hour + ":" + min + " Am" );
                    //button code
}

else if(hour > 12){
        document.write("Good Afternoon , " + Name + "." +
        "<br /> It is currently " +
        hourAd + ":" + min + " Pm" );
}

else if(hour > 19){
        document.write("Good Evening , " + Name + "." +
        "<br /> It is currently " +
        hourAd + ":" + min + " Pm " );
}
</script>

<!--execute when if statement is true-->
<button id="coffee">Brew Coffee</button>
<button id="tv">Turn on TV</button>
<button id="dinner">Let's make dinner</button>
</body>
</html>
2
0
39
2

Ответы 2

Прежде всего, вам нужно скрыть все div с помощью style="display:none" и document.getElementById("your display id").style.display = "block";, вы можете просмотреть рабочий пример, как показано ниже:

var Name = prompt("Hello! What is your name?");

var d = new Date();
var hour = d.getHours();
var min = d.getMinutes();
var hourAd = hour - 12;


if(hour < 12){ //target if statement to toggle button
   document.write("Good Morning , " + Name + "." +
                   "<br /> It is currently " +
                    hour + ":" + min + " Am" );
                    //button code
  document.getElementById("coffee").style.display = "block";                  
}

else if(hour > 12){
        document.write("Good Afternoon , " + Name + "." +
        "<br /> It is currently " +
        hourAd + ":" + min + " Pm" );
        document.getElementById("tv").style.display = "block"; 
}

else if(hour > 19){
        document.write("Good Evening , " + Name + "." +
        "<br /> It is currently " +
        hourAd + ":" + min + " Pm " );
        document.getElementById("dinner").style.display = "block"; 
}
 <!DOCTYPE html>
<html>
<head>
    <title>Greeting | Test</title>
</head>
<body align="center">

<style>

</style>


<!--execute when if statement is true-->
<button id="coffee" style="display:none">Brew Coffee</button>
<button id="tv" style="display:none">Turn on TV</button>
<button id="dinner" style="display:none">Let's make dinner</button>

Я имею в виду, что это может сделать простой jquery / javascript; просто добавьте или удалите классы или CSS. Может быть, пойти на показ: нет; css в зависимости от времени

Пример jquery (изменение цвета кнопки при нажатии)

    $( "button#myBtnID" ).click(function() {
    $(this).toggleClass( "mycss_class" );
    });
    //you can do addClass() or removeClass() too; see jquery api

 
.mycss_class {
    color: white;
    background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" id="myBtnID"> click me to change css class</button>

Другие вопросы по теме