单击输入无线电后，将类添加到图标

Question

我正在尝试在检查或点击输入广播时向元素添加类。我有两个隐藏可见性的输入无线电，​​我在标签中放了一个FontAwesome图标。问题是浏览器控制台告诉我无法读取null的属性addEventListener。我知道我应该做错事但我对Javascript不是很专业。任何帮助将不胜感激。

<script>
  function changeColorArrowUp() {
    var iconArrowUp = document.getElementById('arrow-puja-ascendent');
    var iconArrowDown = document.getElementById('arrow-puja-descendent');
    iconArrowDown.classList.remove("light");
    iconArrowUp.classList.add("light");
  }

  var inputArrowUp = document.getElementById('ascendentOrder');
  inputArrowUp.addEventListener("click", changeColorArrowUp, false);
</script>

<div class="wrapper-title-range">
  <p class="text-title-range">Rango valoración</p>
  <p class="wrapper-inputs-arrows">
    <input type="radio" class="order-results" name="rangoPuja" id="ascendentOrder" value="ascendentOrder">
    <label for = "descendentOrder"><i id="arrow-puja-ascendent" class="fa fa-chevron-up"></i></label>
    <input type="radio" class="order-results" name="rangoPuja" id="descendentOrder" value="descendentOrder">
    <label for = "ascendentOrder"><i id="arrow-puja-descendent" class="fa fa-chevron-down"></i></label>
  </p>
</div>