如何在html数组中获取两个条目?

时间:2019-02-09 13:50:57

标签: javascript html

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

当我按下按钮时,我只会得到我的第一个数组的随机条目,而不是两个数组。我该如何解决?

1 个答案:

答案 0 :(得分:2)

如果要在单击第一个按钮时生成一个随机索引,然后在第一个跨度中显示该值,而在单击另一个按钮时仅在第二个跨度中显示该值,请按照以下方法操作。 / p>

您必须为两个按钮都注册一个单击处理程序,然后在该处理程序中查询适当的跨度并设置其值。

在第一个处理程序中,您将生成随机索引。然后,在这两个处理程序中,您都使用该随机索引来将适当的跨度设置为随机索引处适当数组中的值。

您可以将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>