Random div not displaying

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";
    }
 }

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

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.

what are you doing here?

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

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

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

You will need to resolve the issue @ilenia mentioned to get something working. I have a separate question though. You first hide all the divs and you stated you want to randomly make one of the divs visible when the button is clicked. My question is what do you want to happen with the other divs when the button is clicked. For example, if I click the button and the 3rd div becomes visible and I click the button again and the 2nd div becomes visible, do you want both of them to be visible at this point or only one at a time?

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