Click here to Skip to main content
15,029,188 members
Please Sign up or sign in to vote.
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:


Here is my code

    <input type="button" onclick="Repeat()" value="APPEARANCE">
    <input id="input_number" type="text">
        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>
    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) {
            rand = Math.floor(Math.random()*10);
           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]);

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);
Updated 8-Jul-21 18:53pm

1 solution

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!
Member 14629414 9-Jul-21 1:11am
OriginalGriff I don't ask for a code but I ask for a solution for this . Thank you for the solutions
OriginalGriff 9-Jul-21 1:25am
For too many students, "a solution" means something they can hand in without doing anything, thinking anything, or learning anything! They are always disappointed.
It's good to find one who is trying ... :thumbsup:
Member 14629414 16-Jul-21 7:51am
@OriginalGriff Can you tell more specific about the way to solve this problem like now we have 2 functions and what the jobs each of them do? Or I can post a new code about it but I haven't done it yet because I still don't imagine the steps to solve.
OriginalGriff 16-Jul-21 8:29am
What have you done so far?
It's been a whole week! You should have finished this and moved on to the next task by now!
Member 14629414 16-Jul-21 8:35am
Would you mind if I post a new one? I think I still can't understand the way 2 functions work with a "onclick" event also how to display multi DOM object with one loop. Though I think I'm stupid but I night got along with this
Member 14629414 17-Jul-21 0:07am
OriginalGriff holyshit I've done this. The worst thing you've told was the "clear array" before call the function lol
OriginalGriff 17-Jul-21 0:58am
Well done! :thumbsup:

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900