Блог

Я пытаюсь добавить значки font awesome в свою функцию приветствия, чтобы в каждом заголовке приветствия был прикреплен другой значок font awesome.

Я пытался сделать это традиционным способом, но JavaScript печатает html в виде текста, и теперь заголовок выглядит так:

 Good Morning<i class="fas fa-sun"></i> 

```javascript
function goodSomething() {

  let today = new Date();
  let curHr = today.getHours();

  if (curHr < 12) {
    document.getElementById('greetings').innerText = "Good Morning"   '<i class="fas fa-sun"></i>';
  } else if (curHr < 18) {
    document.getElementById('greetings').innerText = "Good Afternoon"   '<i class="fas fa-coffee"></i>';
  } else {
    document.getElementById('greetings').innerText = "Good Evening"   '<i class="fas fa-moon"></i>';
  }
};
 

Я ожидаю, что вывод:

доброе утро (значок солнца)

добрый день (значок кофе)

добрый вечер (значок луны)

Вы должны использовать innerHTML вместо innerText того, чтобы изменять html, а не текст элемента.

 <i class="fas fa-sun"></i>  //This is string representing html
 

Ниже приведены два фрагмента, которые покажут разницу

Нерабочий код

 document.getElementById("test").innerText = `<i class="fas fa-sun">` 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous">


<div id="test"></div> 

Рабочий код

 document.getElementById("test").innerHTML = `<i class="fas fa-sun">` 

 <div id="test"></div>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 

Также вы можете сделать его более чистым и динамичным, используя массив объектов.

 function goodSomething() {
  let curHr = new Date().getHours();
  const conds = [
        {cond:curHr < 12, icon:"sun", time:"Morning"},
        {cond:curHr < 18, icon:"coffee", time:"Afternoon"},
        {cond:true, icon:"moon", time:"Evening"}
  ]
  let {time,icon} = conds.find(x => x.cond);
  document.getElementById('greetings').innerHTML = `Good ${time} <i class="fas fa-${icon}"></i>`
  
};