How do I affect all the classes on javascript?

Question

Here is my sample code for HTML And CSS

body{
  font-family: Verdana, Geneva, sans-serif;
}

.box{
  width: 140px;
  height: 140px;
  background-color: red;
  display: none;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}

.bold{
  font-weight: bold;
}
.table{
  border: 2px solid black;
  height: 150px;
  width: 150px;
}




</style>

<p class="bold">Your Time: <span id="time">0.000</span>s</p>

<table id="table">
  <tbody>
    <tr>
      <td class="table"><div class="box"></div></td>
      <td class="table"><div class="box"></div></td>
      <td class="table"><div class="box"></div></td>
    </tr>
    <tr>
      <td class="table"><div class="box"></div></td>
      <td class="table"><div class="box"></div></td>
      <td class="table"><div class="box"></div></td>
    </tr>
    <tr>
      <td class="table"><div class="box"></div></td>
      <td class="table"><div class="box"></div></td>
      <td class="table"><div class="box"></div></td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">


function getRandomColor() {
     var letters = '0123456789ABCDEF'.split('');
     var color = '#';
     for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
 }


var clickedTime; var createdTime; var reactionTime;


function makeBox(){

    createdTime=Date.now();

    var time = Math.random();

    time = 5000*time;

    var box = document.getElementsByClassName("box");

    setTimeout(function(){

      if(Math.random()>0.5){


        for (var i=0;i<box.length; i++) {
              box[i].style.borderRadius="100px";

        }else{

          for (var i=0;i<box.length; i++) {
              box[i].style.borderRadius="0";
        }

        for (var i=0;i<box.length; i++) {
              box[i].style.backgroundColor=getRandomColor();

        for (var i=0;i<box.length; i++) {
              box[i].style.display="block";

        createdTime=Date.now();
    }, time);
}

       for (var i=0;i<box.length; i++) {
              box[i].onclick=function(){

        clickedTime=Date.now();

        reactionTime=(clickedTime-createdTime)/1000;

        document.getElementById('time')[0].innerHTML=reactionTime;

        this.style.display="none";

        makeBox();
   }

   makeBox();

</script>

My goal here is to display different shapes in 9 boxes all together at once and I'm starting out first to display a shape in all the boxes but when I use this code, nothing shows up. Also, I've checked for codes about getting elements about classes, it seems to be a bit more than getting ids. And I've tried using for loops to be able to access all the elements but I don't know why it doesnt work. :/

Answer 1

There were few syntax errors, missing }:

var box = document.getElementsByClassName("box");

setTimeout(function() {

  if (Math.random() > 0.5) {

    for (var i = 0; i < box.length; i++) {
      box[i].style.borderRadius = "100px";
    }

  } else {

    for (var i = 0; i < box.length; i++) {
      box[i].style.borderRadius = "0";
    }

    for (var i = 0; i < box.length; i++) {
      box[i].style.backgroundColor = 'orange'; // for test purpose replaced with `getRandomColor()`
    } //<-- missing
    for (var i = 0; i < box.length; i++) {
      box[i].style.display = "block";
    } //<-- missing
    createdTime = Date.now();
  } //<-- missing
}, 100); //<-- for test purpose replaced with `time`

.box {
  border: 1px solid grey;
  padding: 3px 4px;
  width: 50px;
  height: 50px;
  background: skyblue;
}

<table id="table">
  <tbody>
    <tr>
      <td class="table">
        <div class="box"></div>
      </td>
      <td class="table">
        <div class="box"></div>
      </td>
      <td class="table">
        <div class="box"></div>
      </td>
    </tr>
    <tr>
      <td class="table">
        <div class="box"></div>
      </td>
      <td class="table">
        <div class="box"></div>
      </td>
      <td class="table">
        <div class="box"></div>
      </td>
    </tr>
    <tr>
      <td class="table">
        <div class="box"></div>
      </td>
      <td class="table">
        <div class="box"></div>
      </td>
      <td class="table">
        <div class="box"></div>
      </td>
    </tr>`
  </tbody>
</table>

Answer 2

Have you applied any css styles to the box class? If not, the width and height will be 0 which is why you won't see anything.

Try adding this in the <head> of your html:

<style>
.box
{
    width:100px;
    height:100px;
}
</style>

Answer 3

Your script seems to work quite fine for me,

If you just ensure to give a width and height to your .box elements:

JSFiddle: http://jsfiddle.net/FloSchieldBobby/1gb0ae9q/

var box = document.getElementsByClassName("box");

var getRandomColor = function () {
    return 'rgb(' + Math.floor(Math.random() * 255) + ', ' + Math.floor(Math.random() * 255) + ', ' + Math.floor(Math.random() * 255) + ')';
};

setTimeout(function(){
    
    if (Math.random() > 0.5) {
        
        for (var i=0;i<box.length; i++) {
            box[i].style.borderRadius="100px";
        }
        
    } else {
        for (var i=0;i<box.length; i++) {
            box[i].style.borderRadius="0";
        }
    }
    
    for (var i=0;i<box.length; i++) {
        box[i].style.backgroundColor=getRandomColor();
        box[i].style.display="block";
    }
    
    createdTime = Date.now();
}, 100);

#table {
    width: 100%;
}

#table .box {
    width: 50px;
    height: 50px;
}

<table id="table">
    <tbody>
        <tr>
            <td class="table"><div class="box"></div></td>
            <td class="table"><div class="box"></div></td>
            <td class="table"><div class="box"></div></td>
        </tr>
        <tr>
            <td class="table"><div class="box"></div></td>
            <td class="table"><div class="box"></div></td>
            <td class="table"><div class="box"></div></td>
        </tr>
        <tr>
            <td class="table"><div class="box"></div></td>
            <td class="table"><div class="box"></div></td>
            <td class="table"><div class="box"></div></td>
        </tr>
    </tbody>
</table>

#table {
    width: 100%;
}

#table .box {
    width: 50px;
    height: 50px;
}

Answer 4

I guess you confused setTimout and Set Interval. Check this out https://jsfiddle.net/arunzo/j4uqLenx/

  var box = document.getElementsByClassName("box");

 function getRandomColor() {
     var letters = '0123456789ABCDEF'.split('');
     var color = '#';
     for (var i = 0; i < 6; i++) {
         color += letters[Math.floor(Math.random() * 16)];
     }
     return color;
 }

 setInterval(function () {
     console.log("Tick");
     if (Math.random() > 0.5) {

         for (var i = 0; i < box.length; i++) {
             box[i].style.borderRadius = "100px";
         }

     } else {

         for (var i = 0; i < box.length; i++) {
             box[i].style.borderRadius = "0";
         }

         for (var i = 0; i < box.length; i++) {
             box[i].style.backgroundColor = getRandomColor();
         }

         for (var i = 0; i < box.length; i++) {
             box[i].style.display = "block";
         }


     }
 }, 1000);