Javascript-форум - Вывод слова в тег исходя из выбора в select

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вывод слова в тег исходя из выбора в select (https://javascript.ru/forum/misc/53843-vyvod-slova-v-teg-iskhodya-iz-vybora-v-select.html)

Вывод слова в тег исходя из выбора в select

Имеется select. При выборе 0 - год; 1-4 года. 5 - лет.

<select onchange="onj()" id="hosting">
  <option value="0">Ноль</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
  <option value="5">Пять</option>
</select>
год<div id="padej"></div>

И JS, но получилось кохлозно из за небольших знаний JS

padej = (parseInt(hosting.options[hosting.selectedIndex].value) == 1) ? padej.innerHTML = 'а' : 0;
padej = (parseInt(hosting.options[hosting.selectedIndex].value) == 1) ? document.getElementById('padej').style.display = 'block' : 0; 
 padej = (parseInt(hosting.options[hosting.selectedIndex].value) == 0) ? document.getElementById('padej').style.display = 'none' : 0;

При нуле - год. От 1-3 окончание а (Года), а при выборе 5 другое слово (5 лет)
Этот код работает :) Но хотелось бы нормальный код. Сделал так, потому что при выборе другого значения (0 или 5) окончание а остается.
Как сделать этот код рациональным?

В таком вот духе:

<html>
<head>
</head>
<body>

<select id="hosting">
  <option value="0">Ноль</option>
  <option value="1">Один</option>
</select>
год<div id="padej"></div>

<script>


hosting.onchange=function(){
 switch(this.value){
   case "0": padej.innerHTML="foo"; break
   case "1": padej.innerHTML="bar"; break
 }
}



</script>
 
</body>
</html>

Спасибо большое, но к сожалению Ваш вариант конфликтует (останавливает) выполнение другого скрипта - калькулятор. Который вытягивает из Value цену. Как нибудь реально это избежать?
Калькулятор такого вида:

function calc() {
  var price = 0;
  var hosting = document.getElementById("hosting");
  price += parseInt(hosting.options[hosting.selectedIndex].value);
  result.innerHTML = price;
 }

k_DizeL,
хз откуда она у Вас вызывается. Попробуйте вместо нее, типа

<html>
<head>
</head>

<body>

<select id="hosting">
  <option value="0">Ноль</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
  <option value="5">Пять</option>
</select>
год<div id="padej"></div>
<div id="result"></div>



<script>


hosting.onchange=function(){
 var n=(+this.value)
 padej.innerHTML=n
 padej.style.display= n? "block" : "none"
 result.innerHTML=(+result.innerHTML)+n
}


</script>


  
</body>
</html>

kotlov-net, а вызывается она вот так

<html><head></head><body>

<select onchange="calc()" id="hosting">
 <option value="0">1</option>
 <option value="1">2</option>
 <option value="2">3</option>
 <option value="3">4</option>
 <option value="4">5</option>
</select>

<span id="padej">год</span>

Итого: <span id="result">10</span>

<script>
function calc() {
  var price = 10;
  var hosting = document.getElementById("hosting");
  price += parseInt(hosting.options[hosting.selectedIndex].value);
  result.innerHTML = price;
 }
 
hosting.onchange=function(){
 var n=(+this.value)
 padej.innerHTML=n
 padej.style.display= n? "block" : "none"
 result.innerHTML=(+result.innerHTML)+n
}
}

</script>

</body></html>

Кто нибудь предложит другие варианты? Решение этой проблемы еще не найдено