Блог

Главная - Вопросы по программированию - существует ли способ отображения выражения настроения в html?

существует ли способ отображения выражения настроения в html?

#javascript #html

#javascript #HTML

Вопрос:

у меня на выходе настроение входного предложения: например: «я так сильно люблю» -> Настроение: «ПОЗИТИВНОЕ»

я хочу отобразить лицо с цветом (зеленое лицо для положительного, синее лицо для нейтрального и красное для отрицательного) в html вместо «Положительного», «нейтрального» или «отрицательного»…

Комментарии:

1. Пожалуйста, поделитесь своими усилиями, чтобы помочь вам. Что вы сделали и какую ошибку вы получили, когда пытались решить свою проблему.

Ответ №1:

Вот пример изменения цвета лица при вводе.

Я новичок в программировании и StackOverflow, извините, если это бесполезно.

Вот jsfiddle.

HTML :

 <form>
  <label>How are you ? </label>
  <input type="radio" id="happy" name="sentiment" value="happy">
  <label for="happy">I'm happy</label>
  <input type="radio" id="soso" name="sentiment" value="soso">
  <label for="soso">Soso...</label>
  <input type="radio" id="angry" name="sentiment" value="angry">
  <label for="angry">I'm angry</label>
</form>

<p>Output : <span id="sentiment" class="">☻</span><span id="others"></span></p>

CSS :

 span#sentiment {
  color : #333;
}

span#sentiment.happy {
  color : #0F0;
}

span#sentiment.soso {
  color : #FF0;
}

span#sentiment.angry {
  color : #F00;
}

JS :

 var spanSentiment = document.getElementById('sentiment');
var spanOthers = document.getElementById('others');

var happy = document.getElementById('happy');
happy.addEventListener('change', function() {
    spanSentiment.classList.remove('angry');
  spanSentiment.classList.remove('soso');
  spanSentiment.classList.add('happy');
  spanOthers.innerHTML = ' happy';
});

var soso = document.getElementById('soso');
soso.addEventListener('change', function() {
    spanSentiment.classList.remove('happy');
  spanSentiment.classList.remove('angry');
  spanSentiment.classList.add('soso');
  spanOthers.innerHTML = ' soso';
});

var angry = document.getElementById('angry');
angry.addEventListener('change', function() {
    spanSentiment.classList.remove('happy');
  spanSentiment.classList.remove('soso');
  spanSentiment.classList.add('angry');
  spanOthers.innerHTML = ' angry';
});