CODEWITHSUNDEEP
javascripthtml
user10493657
user10493657

Reputation: 1

js array not displaying content

//array
window.onload = myFunction();
function myFunction(){
var stroreRandom = [];
for (var i = 0; i <= 25; i++){

var random = Math.floor((Math.random() * 78) + 1);
storeRandom.push(random);
x = document.getElementById("demo");
x.innerHTML = storeRandom;
    }
}
<!DOCTYPE html>
<html>
<head>
   
    <link rel= "stylesheet" type = "text/css" href ="css/mystyle.css">
</head>
<body>
    <Table id = table>
        <tr>
            <td class = "bingocell">1</td>
            <td class = "bingocell">2</td>
            <td class = "bingocell">3</td>
            <td class = "bingocell" id = 4>4</td>
            <td class = "bingocell" id = 5>5</td>
        </tr>
       <tr>
            <td class = "bingocell" id = 6>1</td>
            <td class = "bingocell" id = 7>2</td>
            <td class = "bingocell" id = 8>3</td>
            <td class = "bingocell" id = 9>4</td>
            <td class = "bingocell" id = 10>5</td>
        </tr>
         <tr>
            <td class = "bingocell" id = 11>1</td>
            <td class = "bingocell" id = 12>2</td>
            <td class = "bingocell" id = 13>3</td>
            <td class = "bingocell" id = 14>4</td>
            <td class = "bingocell" id = 15>5</td>
        </tr>
         <tr>
            <td class = "bingocell" id = 16>1</td>
            <td class = "bingocell" id = 17>2</td>
            <td class = "bingocell" id = 18>3</td>
            <td class = "bingocell" id = 19>4</td>
            <td class = "bingocell" id = 20>5</td>
        </tr>
         <tr>
            <td class = "bingocell" id = 21>1</td>
            <td class = "bingocell" id = 22>2</td>
            <td class = "bingocell" id = 23>3</td>
            <td class = "bingocell" id = 24>4</td>
            <td class = "bingocell" id = 25>5</td>
        </tr>

    </Table>

<p>Click the button to display a random number between 1 and 78.</p>

<button id = "button" onclick = "myFunction()">Try it</button>

<p id="demo"></p>       

<!--
<script>
    
    function myFunction() {
    var x = document.getElementById("demo")
    x.innerHTML = Math.floor((Math.random() * 78) + 1);
}</script>
-->

 <script src = "js/script.js"></script>
</body>
</html>

the objective is to make a bingo card, that self generates 25 unique numbers from 1-78, I decided to do this by storing the random numbers in an array and assigning them to the table through appendChild but I can't get to that point because I cant get the array to store information

There are no issues with path

Upvotes: 0

Views: 34

Answers (2)

ACD
ACD

Reputation: 1431

javascript is case sensitive with its variable. strorerandom != stroreRandom

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

There are errors coming which can be seen in console.

  1. innerhtml has to be innerHTML
  2. storeRandom case to be same across function as strorerandom is not same as stroreRandom

//array
window.onload = myFunction();
function myFunction(){
var storeRandom= [];
for (var i = 0; i <= 25; i++){

var random = Math.floor((Math.random() * 78) + 1);
storeRandom.push(random);
x = document.getElementById("demo");
x.innerHTML= storeRandom;
    }
}
<!DOCTYPE html>
<html>
<head>
   
    <link rel= "stylesheet" type = "text/css" href ="css/mystyle.css">
</head>
<body>
    <Table id = table>
        <tr>
            <td class = "bingocell">1</td>
            <td class = "bingocell">2</td>
            <td class = "bingocell">3</td>
            <td class = "bingocell" id = 4>4</td>
            <td class = "bingocell" id = 5>5</td>
        </tr>
       <tr>
            <td class = "bingocell" id = 6>1</td>
            <td class = "bingocell" id = 7>2</td>
            <td class = "bingocell" id = 8>3</td>
            <td class = "bingocell" id = 9>4</td>
            <td class = "bingocell" id = 10>5</td>
        </tr>
         <tr>
            <td class = "bingocell" id = 11>1</td>
            <td class = "bingocell" id = 12>2</td>
            <td class = "bingocell" id = 13>3</td>
            <td class = "bingocell" id = 14>4</td>
            <td class = "bingocell" id = 15>5</td>
        </tr>
         <tr>
            <td class = "bingocell" id = 16>1</td>
            <td class = "bingocell" id = 17>2</td>
            <td class = "bingocell" id = 18>3</td>
            <td class = "bingocell" id = 19>4</td>
            <td class = "bingocell" id = 20>5</td>
        </tr>
         <tr>
            <td class = "bingocell" id = 21>1</td>
            <td class = "bingocell" id = 22>2</td>
            <td class = "bingocell" id = 23>3</td>
            <td class = "bingocell" id = 24>4</td>
            <td class = "bingocell" id = 25>5</td>
        </tr>

    </Table>

<p>Click the button to display a random number between 1 and 78.</p>

<button id = "button" onclick = "myFunction()">Try it</button>

<p id="demo"></p>       

<!--
<script>
    
    function myFunction() {
    var x = document.getElementById("demo")
    x.innerHTML = Math.floor((Math.random() * 78) + 1);
}</script>
-->

 <script src = "js/script.js"></script>
</body>
</html>

Upvotes: 2

Related Questions