使用变量的值从数组调用

Question

首先，很抱歉，是否曾经有人问过这个问题，而我已经错过了一个已经回答过的问题，但是如何使用变量值将某个项目从数组中拉出。

我对Javascript还是比较陌生，我可能做的是完全错误的事情，我的术语很可能是错误的，所以再次抱歉！

我目前拥有的Javascript如下。

var elementList = ['H', "He", "Li", "Be", "B", "C", "N", "O", "F", "Ne", "Na", "Mg", "Al", "Si", "P", "S", "Cl", "Ar", "K", "Ca", "Sc", "Ti", "V", "Cr", "Mn", "Fe", "Co", "Ni", "Cu", "Zn", "Ga", "Ge", "As", "Se", "Br", "Kr", "Rb", "Sr", "Y", "Zr", "Nb", "Mo", "Tc", "Ru", "Rh", "Pd", "Ag", "Cd", "In", "Sn", "Sb", "Te", "I", "Xe", "Cs", "Ba", "La", "Hf", "Ta", "W", "Re", "Os", "Ir", "Pt", "Au", "Hg", "Tl", "Pb", "Bi", "Po", "At", "Rn", "Fr", "Ra", "Ac", "Rf", "Db", "Sg", "Bh", "Hs", "Mt", "Ds", "Rg", "Cn", "Nh", "Fl", "Mc", "Lv", "Ts", "Og", "Ce", "Pr", "Nd", "Pm", "Sm", "Eu", "Gd", "Tb", "Dy", "Ho", "Er", "Tm", "Yb", "Lu", "Th", "Pa", "U", "Np", "Pu", "Am", "Cm", "Bk", "Cf", "Es", "Fm", "Md", "No", "Lr"];

document.write(elementList[i]);

var i = 5;

从本质上讲（我还没有得到这么多），我想有一个按钮，通过增加和减少变量i的值，可以在数组中增加和减少。这是可能的还是我完全以错误的方式来做？

感谢您提供的所有帮助！ 将在其中使用的项目的链接为ATOM

Answer 1

您可以使用document.querySelector()来查询您的元素，然后使用addEventListener('click', handler)附加点击处理程序：

document.querySelector('#Plus').addEventListener('click', () => {
  // do stuff when plus is clicked
});

或者您可以将处理程序直接附加到这样的元素上：

<button onclick="handlePlus()">Plus</button>

function handlePlus() {
  // do stuff when plus is clicked
}

这是您链接中的演示。单击加号/减号，变量i将递增/递减，并且相应的元素显示在原子核中：

const elementList = ['H', "He", "Li", "Be", "B", "C", "N", "O", "F", "Ne", "Na", "Mg", "Al", "Si", "P", "S", "Cl", "Ar", "K", "Ca", "Sc", "Ti", "V", "Cr", "Mn", "Fe", "Co", "Ni", "Cu", "Zn", "Ga", "Ge", "As", "Se", "Br", "Kr", "Rb", "Sr", "Y", "Zr", "Nb", "Mo", "Tc", "Ru", "Rh", "Pd", "Ag", "Cd", "In", "Sn", "Sb", "Te", "I", "Xe", "Cs", "Ba", "La", "Hf", "Ta", "W", "Re", "Os", "Ir", "Pt", "Au", "Hg", "Tl", "Pb", "Bi", "Po", "At", "Rn", "Fr", "Ra", "Ac", "Rf", "Db", "Sg", "Bh", "Hs", "Mt", "Ds", "Rg", "Cn", "Nh", "Fl", "Mc", "Lv", "Ts", "Og", "Ce", "Pr", "Nd", "Pm", "Sm", "Eu", "Gd", "Tb", "Dy", "Ho", "Er", "Tm", "Yb", "Lu", "Th", "Pa", "U", "Np", "Pu", "Am", "Cm", "Bk", "Cf", "Es", "Fm", "Md", "No", "Lr"];

let i = 0;

const plus = document.querySelector('#Plus');
const minus = document.querySelector('#Minus');
const element = document.querySelector('#element');

element.textContent = elementList[i];

plus.addEventListener('click', () => {
  i = ++i % elementList.length;
  element.textContent = elementList[i];
});

minus.addEventListener('click', () => {
  i = i > 0 ? --i : 0;
  element.textContent = elementList[i];
});

html {
  font-family: 'Nunito', sans-serif;
  overflow-y: hidden;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    } to {
        transform:rotate(360deg);
    }
}

html{
  background: #232323;
}

.AtomNucleus {
  width: 100px;
  height: 100px;
  background-color: #e9e9e9;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 100px;

  margin: -50px 0 0 -50px;
}

.PageContainer {
  width: 100%;
  height: 100%;
}

.ElectronRingOne {
  width: 140px;
  height: 140px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -72px 0 0 -72px;
  background-color: #0000ff00;
  border-radius: 50%;
  border: 2px solid #555;
  animation-name: spin;
  animation-duration: 12000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ElectronRingTwo {
  width: 180px;
  height: 180px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -92px 0 0 -92px;
  background-color: #0000ff00;
  border-radius: 50%;
  border: 2px solid #555;
  animation-name: spin;
  animation-duration: 24000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: reverse;
}

.ElectronRingThree {
  width: 220px;
  height: 220px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -112px 0 0 -112px;
  background-color: #0000ff00;
  border-radius: 50%;
  border: 2px solid #555;
  animation-name: spin;
  animation-duration: 48000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ElectronRO {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #555;
  border: 5px solid #232323;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
  
}

.ElectronRingOne .ElectronRO:nth-child(1) {
  transform: rotate(0deg) translate(70px);
}

.ElectronRingOne .ElectronRO:nth-child(2) {
  transform: rotate(180deg) translate(70px);
}

.ElectronRT {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #555;
  border: 5px solid #232323;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
}

.ElectronRingTwo .ElectronRT:nth-child(1) {
  transform: rotate(0deg) translate(90px);
}

.ElectronRingTwo .ElectronRT:nth-child(2) {
  transform: rotate(45deg) translate(90px);
}
.ElectronRingTwo .ElectronRT:nth-child(3) {
  transform: rotate(90deg) translate(90px);
}

.ElectronRingTwo .ElectronRT:nth-child(4) {
  transform: rotate(135deg) translate(90px);
}
.ElectronRingTwo .ElectronRT:nth-child(5) {
  transform: rotate(180deg) translate(90px);
}

.ElectronRingTwo .ElectronRT:nth-child(6) {
  transform: rotate(225deg) translate(90px);
}
.ElectronRingTwo .ElectronRT:nth-child(7) {
  transform: rotate(270deg) translate(90px);
}

.ElectronRingTwo .ElectronRT:nth-child(8) {
  transform: rotate(315deg) translate(90px);
}

.ElectronRThr {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #555;
  border: 5px solid #232323;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
}

.ElectronRingThree .ElectronRThr:nth-child(1) {
  transform: rotate(0deg) translate(110px);
}

.ElectronRingThree .ElectronRThr:nth-child(2) {
  transform: rotate(45deg) translate(110px);
}
.ElectronRingThree .ElectronRThr:nth-child(3) {
  transform: rotate(90deg) translate(110px);
}

.ElectronRingThree .ElectronRThr:nth-child(4) {
  transform: rotate(135deg) translate(110px);
}
.ElectronRingThree .ElectronRThr:nth-child(5) {
  transform: rotate(180deg) translate(110px);
}

.ElectronRingThree .ElectronRThr:nth-child(6) {
  transform: rotate(225deg) translate(110px);
}
.ElectronRingThree .ElectronRThr:nth-child(7) {
  transform: rotate(270deg) translate(110px);
}

.ElectronRingThree .ElectronRThr:nth-child(8) {
  transform: rotate(315deg) translate(110px);
}

.AddElectrons {
  position: absolute;
  background-color: #e9e9e9;
  border-radius: 20px;
  border: none;
  width: 40px;
  height: 40px;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
  outline: none;
  z-index: 100000;
  cursor: pointer;
  font-size: 20px;
}

.AddElectrons:hover {
  background-color: #c9c9c9;
}

.AddElectrons:active {
  background-color: #848484;
}

#Plus {
  left: 250px;
}

#Minus {
  left: -160px;
}

.ButtonContainer {
  width: 100%;
  height: 100%;
  position: absolute;
}

@media only screen and (max-width: 600px) {
  #Plus {
    left: 100px;
    top: 200px;
  }
  #Minus {
    left: 0px;
    top: 200px;
  }
}

<div class="PageContainer">
  <div class="ElectronRingOne">
    <div class="ElectronRO"></div>
    <div class="ElectronRO"></div>
  </div>
  <div class="ElectronRingTwo">
    <div class="ElectronRT"></div>
    <div class="ElectronRT"></div>
    <div class="ElectronRT"></div>
    <div class="ElectronRT"></div>
    <div class="ElectronRT"></div>
    <div class="ElectronRT"></div>
    <div class="ElectronRT"></div>
    <div class="ElectronRT"></div>
  </div>
  <div class="ElectronRingThree">
    <div class="ElectronRThr"></div>
    <div class="ElectronRThr"></div>
    <div class="ElectronRThr"></div>
    <div class="ElectronRThr"></div>
    <div class="ElectronRThr"></div>
    <div class="ElectronRThr"></div>
    <div class="ElectronRThr"></div>
    <div class="ElectronRThr"></div>
  </div>
  <div class="AtomNucleus">
    <div class="ButtonContainer">
      <button class="AddElectrons" id="Plus">+</button>
      <span id="element"></span>
      <button class="AddElectrons" id="Minus">-</button>
    </div>
  </div>
</div>