How to get two entries in a array in html?

Question

I have 2 arrays. I want to get a random entry as output in both arrays. So we generate a random number, say 3. I want the output; the 3th entries in both arrays. In this case it is "3" and "c".

I have tried to write this, but it does not work.

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>

When I press the button I only get a random entry my first array, not both of them. How can I solve this?

Your code seems to working just fine in the snippet. when the first button is clicked a random item is picked in both arrays and displayed — jo_va
– jo_va, Commented Feb 9, 2019 at 14:08
When I press Array1 I only want array1 as output. How can I write this? And when I press Array2 I should get the full output. — Ole Petersen
– Ole Petersen, Commented Feb 9, 2019 at 14:09
You are binding the click event only on the "array 1 button" and in the callback you are changing the value of both of the spans. — Kristiyan Gospodinov
– Kristiyan Gospodinov, Commented Feb 9, 2019 at 14:11
So you say it should only show full on second click.... so where is the second click event handler in your code? So first click store the random number, second click use that variable... — epascarello
– epascarello, Commented Feb 9, 2019 at 14:22

jo_va · Accepted Answer · 2019-02-09 14:26:40Z

2

If you want to generate a random index when you click the first button and then show the value in the first span and only show it in the second span when you click the other button, here is how you can do it.

You have to register a click handler for both of your buttons, and in that handlers, query the appropriate spans and set their value.

In the first handler, you generate the random index. Then in both handlers, you use that random index to set the appropriate span to the value from the appropriate array at the random index.

You can use document.querySelector() with the class name to query a single item.

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>

edited Feb 9, 2019 at 14:26

answered Feb 9, 2019 at 14:11

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ole Petersen Over a year ago

Thanks, but now we generate 2 random numbers. The random number in array1 is the only random number we need.

jo_va Over a year ago

Sorry, I don't understand, what do you want to happen when we click on Array1? and on Array2?

epascarello Over a year ago

OP wants to generate one number and when you click on the second it shows the answer

Ole Petersen Over a year ago

Say I want to count how many times I press on the button, say Array1. How can this be done?

Collectives™ on Stack Overflow

How to get two entries in a array in html?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related