javascript - How to add another function to an addEventListener

Question

I've created a slideshow of icons. Each icon has its own value (In this case the value is Miles Per Hour). The answer container will have its own value which will use the constant variable of 7917.5 miles (earths diameter).

<div class="main-container">
  <div class="object-container">
    <div class="icon-container">
      <i class="fa fa-car" id="active" value="100"></i>
      <i class="fa fa-bicycle" value="25"></i>
      <i class="fa fa-plane" value="500"></i>
      <i class="fa fa-ship" value="10"></i>
      <i class="fa fa-fighter-jet" value="1000"></i>
      <i class="fa fa-space-shuttle" value="3000"></i>
    </div>
    <div class="arrow-buttons">
      <a href="#" class="right-arrow" id="right-arrow"></a>
      <a href="#" class="left-arrow" id="left-arrow"></a>
    </div>
  </div>
  <div class="answer-container" id="answer-container">
  </div>
</div>
        
</div>

.not-active {
  font-size        : 150px;
  position         : relative;
  left             : 12rem;
  top              : 12rem;
  z-index          : -10;
  display          : none;
  }
.active {
  z-index          : 10;
  display          : inline-block;
  font-size        : 200px;
  position         : relative;
  left             : 9rem;
  top              : 10rem;
  }
.object-container {
  position         : relative;
  left             : 40rem;
  top              : 15rem;
  background-color : rgb(0, 0, 58);
  width            : 40rem;
  height           : 40rem;
  }
.arrow-buttons {
  position         : fixed;
  top              : 30rem;
  z-index          : 100;
  }
.left-arrow, 
.right-arrow {
  width            : 50px;
  height           : 50px;
  transition       : .5s;
  float            : left;
  box-shadow       : -2px 2px 0 rgba(255, 241, 241, 0.5);
  cursor           : pointer;
  }

Javscript will show the next active icon when clicking right/ left arrow.

var icons = [...document.querySelectorAll('.icon-container .fa')];

function adjustActive (adjustment) {
  var current = icons.find(it => it.id === 'active');
  var currentIndex = icons.indexOf(current);
  var nextIndex = (currentIndex + adjustment) % icons.length;

  if (nextIndex < 0) nextIndex = icons.length - 1;

  current.removeAttribute('id');
  icons[nextIndex].id = 'active';
}

document.querySelector('#left-arrow').addEventListener('click', e => adjustActive(-1));
document.querySelector('#right-arrow').addEventListener('click', e => adjustActive(1));

Now when the right or left arrow is clicked, I want the respective active icon to be divided by the earth variable which will calculate how long it takes that object to revolve around earth.

let earth = 7917.5
let answerContainer = document.getElementById("answer-container")

let findOrbitalPeriod = () =>{
  if(document.getElementById('right-arrow').clicked == true) {
      let orbitalPeriod = earth/ current; 
      return answerContainer.innerHTML(orbitalPeriod.value)
  }
}

But for some reason the application is inactive and the answer container doesnt respond. The slideshow for the icons work however?

question from:https://stackoverflow.com/questions/65649749/how-to-add-another-function-to-an-addeventlistener

Answer 1

But for some reason the application is inactive and the answer container doesn't respond.

change document.querySelector('#left-arrow') to document.getElementById('left-arrow'),

if(document.getElementById('right-arrow').clicked == true) execute this function onClick event. Try to assign onCick event in HTML or add and eventListener