javascript - 如何在html中获取数组中的两个条目？

Question

我有 2 个数组。我想在两个数组中获得一个随机条目作为输出。 所以我们生成一个随机数，比如 3。 我想要输出；两个数组中的第三个条目。在本例中为“3”和“c”。

我尝试过这样写，但行不通。

var myarray = new Array('1', '2', '3', '4');
var myarray2 = new Array('a', 'b', 'c', 'd');

document.getElementsByClassName('item')[0].addEventListener('click', function() {
  random = Math.floor(Math.random() * myarray.length);
  document.getElementsByClassName('itemValue')[0].innerHTML = myarray[random];
  document.getElementsByClassName('itemValue2')[0].innerHTML = myarray2[random];
});

<button class="item">Array 1</button>
<button class="item2">Array2</button>

<p><span> Array1 : </span><span class="itemValue"></span></p>
<p><span> Array2 : </span><span class="itemValue2"></span></p>

当我按下按钮时，我只得到第一个数组的随机条目，而不是两者。我该如何解决这个问题？

Answer 1

如果您想在单击第一个按钮时生成随机索引，然后在第一个范围中显示该值，并仅在单击另一个按钮时在第二个范围中显示该值，请按以下方法操作。

您必须为两个按钮注册一个点击处理程序，并在该处理程序中查询适当的范围并设置它们的值。

在第一个处理程序中，您生成随机索引。然后在两个处理程序中，您使用该随机索引将适当的范围设置为随机索引处适当数组中的值。

您可以使用 document.querySelector() 和类名来查询单个项目。

var myarray = new Array('1', '2', '3', '4');
var myarray2 = new Array('a', 'b', 'c', 'd');

let randomIdx = 0;

document.querySelector('.item').addEventListener('click', function() {
  randomIdx = Math.floor(Math.random() * myarray.length);
  document.querySelector('.itemValue').innerHTML = myarray[randomIdx];
});

document.querySelector('.item2').addEventListener('click', function() {
  document.querySelector('.itemValue2').innerHTML = myarray2[randomIdx];
});

<button class="item">Array 1</button>
<button class="item2">Array2</button>

<p><span> Array1 : </span><span class="itemValue"></span></p>
<p><span> Array2 : </span><span class="itemValue2"></span></p>