如何將另一個 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>