2014-12-11 4 views
0

Я пытаюсь добавить текст на свой сайт в зависимости от времени. Однако я не могу заставить его работать!Функция «Моя дата»() JavaScript не работает?

HTML:

<!doctype> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="index.css"> 
<script link="index.js"></script> 
</head> 
<body> 

<div id="header"> 
    <img id="bannerImage" src="banner.jpg" align="middle"></img> 
</div id="header"> 
<section id="master"> 

<div id="navigation"> 
    <ul> 
     <li class="navObject">About Me</li> 
     <li class="navObject">Products</li> 
     <li class="navObject">Contact</li> 
     <li class="navObject">FAQ</li> 
    </ul> 
</div> 
<div> 
<h3 id="welcomeText"></h3> 
</div> 
</section> 
</body> 
</html> 

JS:

var timeAdd = function(){ 
         var today = new Date(); 
         var todayHour = today.getHours(); 
         var message; 

         switch(todayHour){ 
          case(todayHour > 18): 
           message = "Good Evening!"; 
           break; 
          case(todayHour > 12): 
           message = "Good Afternoon!"; 
           break; 
          case(todayHour > 0): 
           message = "Good Morning!"; 
           break; 
          default: 
           message = "Welcome!"; 
           break; 
          } 
          return message; 
          }; 
var tag = document.getElementById("welcomeText"); 
tag.textContent(timeAdd()); 

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

+2

'tag.innerHTML = timeAdd()' должна работать , – Christoph

+1

Вы хотите использовать 'switch (true)' –

+0

@Antiga См. Http://stackoverflow.com/a/3463944/338803 – sje397

ответ

0

Вместо установки innerHtml свойство, text или html

tag.innerHTML = timeAdd() 
+0

где у вас есть эта информация? Уверен, что свойство 'h3' имеет свойство textContent. – Christoph

+0

@ Кристоф Вы правы. – Oscar

+0

Значит, вы должны удалить свой ответ? – Christoph

2

Ваше задание неправильно - это должно быть сделано следующим образом:

tag.textContent = timeAdd(); 

лучшая поддержка, однако, имеет innerHTML. Вы можете использовать его так же, как textContent.

tag.innerHTML = timeAdd(); 

Кроме того, вы не выключаетесь. Вы должны использовать switch(true), чтобы он работал правильно. Лично я предпочел бы пойти с if else, который выглядит чище меня:

if (todayHour > 18){ 
    message = "Good Evening!"; 
} else if (todayHour > 12){ 
    message = "Good Afternoon!"; 
} else if (todayHour > 0){ 
    message = "Good Morning!"; 
} else { 
    message = "Welcome!"; 
} 

EDIT: Кроме того, вы должны заботиться о порядке исполнения Вашего сценария. Как правило, вы можете включать в свой index.js в голове, однако эта часть:

var tag = document.getElementById("welcomeText"); 
tag.textContent =timeAdd(); 

должен быть выполнен после того, как вы приведете <h3 id="welcomeText"></h3> в разметке. Так как вы называете index.js после этого элемента, или выполнить только эти две строки после:

<h3 id="welcomeText"></h3> 
<script src="index.js"></script> 

или

<script src="index.js"></script> <!-- without the last two lines! --> 
<h3 id="welcomeText"></h3> 
<script> 
    var tag = document.getElementById("welcomeText"); 
    tag.textContent =timeAdd(); 
</script> 
+0

Большое вам спасибо! Теперь я понимаю. Я ценю вашу помощь. –

+0

@ColbyCox Если все ваши проблемы решены, теперь вы можете пометить свои вопросы, как они были решены сообществом SO, приняв ответ, поскольку решение будет тикать галочку прямо под счетом. – Christoph

0

textContent это свойство, а не метод.
Кроме того, если вы используете логические случаи, чтобы соответствовать первому следует использовать true в качестве переключателя аргумента

Попробуйте это:

var timeAdd = function(){ 
    var today = new Date(); 
    var todayHour = today.getHours(); 
    var message; 
    switch(true){ 
    case(todayHour > 18): 
     message = "Good Evening!"; 
     break; 
    case(todayHour > 12): 
     message = "Good Afternoon!"; 
     break; 
    case(todayHour > 0): 
     message = "Good Morning!"; 
     break; 
    default: 
     message = "Welcome!"; 
     break; 
    } 
    return message; 
}; 

var tag = document.getElementById("welcomeText"); 
tag.textContent = timeAdd(); 
0

Есть несколько вопросов здесь. Сначала удалите id="header" из закрывающего тега div; это недопустимый HTML.

Во-вторых, инструкция switch не работает так, как вы думаете. Используйте это в качестве функции timeAdd вместо (это имя не имеет смысла, либо, может быть, вместо того, чтобы getTimeGreeting:

var timeAdd = function() { 
    var today = new Date(); 
    var todayHour = today.getHours(); 
    var message = 'Welcome!'; 

    if (todayHour >= 18) { 
     message = 'Good Evening!'; 
    } else if (todayHour >= 12) { 
     message = 'Good Afternoon!'; 
    } else if (todayHour >= 0) { 
     message = 'Good Morning!'; 
    } 

    return message; 
}; 

Наконец, измените настройки линии для tag.innerText = timeAdd();

Смежные вопросы