0

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

我对 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

4

2 回答 2

0

您可以使用以下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>

于 2019-03-11T16:16:55.310 回答
0

这是我的尝试类似于以前的答案：

var elementIndex = '0'

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"];

//Assign button elements to varibles.
var minusButton = document.getElementById('Minus');
var plusButton = document.getElementById('Plus');

//Assign the preview div to varible
var current = document.getElementById('current');

//add a click event that will do some logic when minus button is clicked
minusButton.addEventListener('click', function(event){
  elementIndex--
  writeElementTextToHtml();
})

//add a click event that will do some logic when plus button is clicked
plusButton.addEventListener('click', function(event){
  elementIndex++
  writeElementTextToHtml();
})

//Function that can be called to wite the current value to html
var writeElementTextToHtml = function(){
  var elementText = elementList[elementIndex];
  current.innerHTML = elementText;
};

writeElementTextToHtml()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Elements</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>
<body>
  <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 id='current'></div>
      <div class="ButtonContainer">
      <button class="AddElectrons" id="Plus">
        +
      </button>
      <button class="AddElectrons" id="Minus">
        -
      </button>
      </div>
    </div>
</div>
</body>
</html>
于 2019-03-11T16:41:59.223 回答