Random div not displaying

JavaScript
1

Hello I want to make one of my divs appear randomly each time I push the button, but something on my code appears no to be working, and I don’t know what it is, help please.
CODEPEN
html

<div class="mega">
    <div class="manyDivs div1"></div>
    <div class="manyDivs div2"></div>
    <div class="manyDivs div3"></div>
    <div class="manyDivs div4"></div>
    <div id="myPicture"></div>
    <button onclick="run()">click me</button>
</div>

css

.manyDivs {
    margin: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
}
.div1 {background-color: coral;}
.div2 {background-color: firebrick;}
.div3 {background-color: violet;}
.div4 {background-color: palegreen;}

js


var theDiv = document.getElementsByClassName("manyDivs");
for(var i = 0; i < theDiv.length; i++) {
    theDiv[i].style.display = "none";
}
function run(){
    var theDiv = document.getElementsByClassName("manyDivs");
    for(var i = 0; i < theDiv.length; i++) {
        var randomNum = Math.floor(Math.random() * theDiv.length);
        randomNum[i].style.display = "block";
    }
 }
2

what do you expect to happen? what is happenign instead?

3

SORRY I forgot to include the codepen, When I click the button is just not showing anything, I want to see randomly any of the divs.

4

what are you doing here?

5

im trying to call the randomNum variable with the divs include to be display but I think maybe Im using the incrementer wrong operator

6

randomNum is a number, you can’t do randomNum[i]

7

please do not open new topics, if you have more questions keep asking here

but the issue that you are trying to access a property of a number still stands

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.