如何将另一个 function 添加到 addEventListener

Question

我创建了一个图标幻灯片。 每个图标都有自己的值（在这种情况下，值是每小时英里数）。 答案容器将有自己的值，它将使用常量变量 7917.5 英里（地球直径）。

<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 将显示下一个活动图标。

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));

现在，当单击右箭头或左箭头时，我希望将相应的活动图标除以地球变量，该变量将计算 object 围绕地球旋转所需的时间。

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)
  }
}

但由于某种原因，应用程序处于非活动状态，并且应答容器没有响应。 但是，图标的幻灯片有效吗？

Answer 1

但是由于某种原因，应用程序处于非活动状态，并且答案容器没有响应。

将document.querySelector('#left-arrow')更改为document.getElementById('left-arrow') ，

if(document.getElementById('right-arrow').clicked == true)执行此 function onClick 事件。 尝试在 HTML 中分配 onCick 事件或添加和 eventListener

Answer 2

将您的代码更改为下面的示例，并注意您不能将值除以 DOM 元素

let orbitalPeriod = earth/ current; 
return answerContainer.innerHTML(orbitalPeriod.value)

要获取每个图标的值，您需要element.getAttribute 。

你应该使用data-* | 数据值和数据集

并阅读有关element.innerHTML的更多信息。

Element 属性 innerHTML 获取或设置元素中包含的 HTML 或 XML 标记。

 let earth = 7917.5; let icons = [...document.querySelectorAll('.icon-container.fa')]; let answerContainer = document.getElementById("answer-container"); 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; console.log(current); current.removeAttribute('id'); icons[nextIndex].id = 'active'; let orbitalPeriod = earth / current.getAttribute("value"); answerContainer.innerHTML = orbitalPeriod } document.querySelector('#left-arrow').addEventListener('click', e => adjustActive(-1)); document.querySelector('#right-arrow').addEventListener('click', e => adjustActive(1));

 <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">left</a> <a href="#" class="left-arrow" id="left-arrow">right</a> </div> </div> <div class="answer-container" id="answer-container"> </div> </div> </div>