How to display appearance times of each number when generate random numbers several times?

Question

1.00/5 (1 vote)

See more:

I want to create a Javascript program in which when I add the button APPEARANCE it will display the times of appearances of each number from 0 to 9 when I generate random number for 10 times. For example:

APPEARANCE: 10
0:1
1:2
2:2
3:1
4:1
5:1
6:0
7:0
8:1
9:1

Here is my code

<body>
    <input type="button" onclick="Repeat()" value="APPEARANCE">
    <input id="input_number" type="text">
    <br>
        0: <span id="aa"></span>
    <br>1: <span id="ab"></span>
    <br>2: <span id="ac"></span>
    <br>3: <span id="ad"></span>
    <br>4: <span id="ae"></span>
    <br>5: <span id="af"></span>
    <br>6: <span id="ag"></span>
    <br>7: <span id="ah"></span>
    <br>8: <span id="ai"></span>
    <br>9: <span id="ak"></span>
    <script>
    const arr = [0,0,0,0,0,0,0,0,0,0];
    let re1 = document.querySelector("#aa");
    let re2 = document.querySelector("#ab");
    let re3 = document.querySelector("#ac");
    let re4 = document.querySelector("#ad");
    let re5 = document.querySelector("#ae");
    let re6 = document.querySelector("#af");
    let re7 = document.querySelector("#ag");
    let re8 = document.querySelector("#ah");
    let re9 = document.querySelector("#ai");
    let re10 = document.querySelector("#ak");
    let input = document.querySelector("#input_number").value;
      function Repeat(array) {
          for(i=0;i<=input;i++)
          {
            rand = Math.floor(Math.random()*10);
            arr[rand]++;
           }
           return arr;
     re1.textContent= Repeat(arr[0]);
     re2.textContent= Repeat(arr[1]);
     re3.textContent= Repeat(arr[2]);
     re4.textContent= Repeat(arr[3]);
     re5.textContent= Repeat(arr[4]);
     re6.textContent= Repeat(arr[5]);
     re7.textContent= Repeat(arr[6]);
     re8.textContent= Repeat(arr[7]);
     re9.textContent= Repeat(arr[8]);
     re10.textContent= Repeat(arr[9]);
        }
    </script>
</body>

When I tried it on Google Chrome it didn't do anything when I input number in the box. I don't know what's wrong here

What I have tried:

When I delete the arguments "array" in the function " Repeat" and the return arr;
then it showed the errors:

Uncaught RangeError: Maximum call stack size exceeded

at the line:

rand = Math.floor(Math.random()*10);

Posted 8-Jul-21 13:34pm

Member 14629414

Updated 8-Jul-21 18:53pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Accepted Answer · 2021-07-08T18:53:00

Look at your code.
You pass a value to the function Repeat - but you don't use it!
You only call Repeat directly from within itself - but after the return arr line which exits the function immediately. So it is never called except from the onClick event.
If you take out the return arr line it then recursively calls itself from itself ten times! And each of those calls itself 10 times, and each of those ... until the stack runs out.

Create two functions: one is called from the onClick event (call it RepeatNTimes), and it calls the other as many times as the user puts in the input box (call it CountIndex).

Test it, and make sure it works - it won't do what you need for the whole project, but this makes sure the framework is there.
Then modify RepeatNTimes: make it clear your arr array to all zeros before it calls CountIndex. Make sure that works.
Then modify it again show the values of arr in your reN.textContent display and make sure that works.
Now modify CountIndex to generate a random number and increment the appropriate element of arr by using that random value as an index.

Test it again.

This is development: a little step, a test, a fix, a text, a fix a test - then another little step, each building on the existing code when you know it works.
What you have looks like you threw it together without thinking about what it should do but with a lot of hope that you'd get lucky and it would just work! :laugh:
Also, see here: How to Write Code to Solve a Problem, A Beginner's Guide[^]

But I'm not going to give you the code for this - it's your homework, and you need to learn how to do this for yourself!