javascript - 如何获取html数组中固定条目的下一个条目

Question

假设我们有数组

[a,b,c,d,e,f,g,h].

我想编写一个函数，在数组中随机取一个值。 我已经用 JS 和 HTML 编写了这个。

我的问题是这样的: 我想要所选字母的前一个字母和下一个字母。

例如我们得到“e”。然后我想要一个返回“d”和“f”的函数。 我怎样才能做到这一点？

我的代码如下。 (我的 js.file 名为“nyNumber.js”)。

function GetValue() {
  var myarray = new Array("a", "b", "c", "d", "e", "f", "g", "h");

  var random = myarray[Math.floor(Math.random() * myarray.length)];
  //alert(random);
  document.getElementById("message").innerHTML = random;
}

<input type="button" id="btnSearch" value="Give me" onclick="GetValue();" />
<p id="message"></p>

<script src="myNumber.js"></script>

Answer 1

考虑到一个闭环，第一个元素的左侧不存在，因此这将为您提供最后一个元素作为第一个元素的左侧，而最后一个元素的右侧不存在，因此这将为您提供第一个元素作为最后一个元素的右侧。

var myarray = new Array("a", "b", "c", "d", "e", "f", "g", "h");
var random;

document.getElementsByClassName("item")[0].addEventListener("click", function (){
  random = Math.floor(Math.random() * myarray.length);
  document.getElementsByClassName("itemValue")[0].innerHTML = myarray[random];
  document.getElementsByClassName("siblings")[0].removeAttribute("disabled");
})

document.getElementsByClassName("siblings")[0].addEventListener("click", function (){
  var left = myarray[ (random - 1 + myarray.length) % myarray.length ];
  
    var right= myarray[ (random + 1) % myarray.length ];
    
  document.getElementsByClassName("leftSiblingValue")[0].innerHTML = left;
  document.getElementsByClassName("rightSiblingValue")[0].innerHTML = right;
})

<button class="item">item</button>
<button class="siblings" disabled>siblings</button>

<p><span>left siblign : </span><span class="leftSiblingValue"><span></p>
<p><span>item : </span><span class="itemValue"></span></p>
<p><span>right sibling : </span><span class="rightSiblingValue"></span></p>