What is the best way to apply changes to every class in JavaScript?

Question

What is the best way to apply changes to every class in JavaScript?

Check out this HTML and CSS code sample!

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>

I am working on a project to show various shapes in 9 boxes simultaneously but only one shape at a time appears when I run this code. I have tried accessing elements by class and using loops, but it doesn't seem to work as intended. Any suggestions or alternatives would be greatly appreciated!

javascript class for-loop element getelementsbyclassname

Answer 1

Answer №1

Did you customize the box class with any CSS styles? If not, the dimensions might be set to 0, resulting in nothing being visible.

To fix this, consider adding the following code snippet inside the <head> section of your HTML file:

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

Answer 2

Did you customize the box class with any CSS styles? If not, the dimensions might be set to 0, resulting in nothing being visible.

To fix this, consider adding the following code snippet inside the <head> section of your HTML file:

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

Answer 3

Answer №2

Everything seems to be running smoothly with your script,

Just don't forget to assign a width and height to your .box elements:

Check out the live demo on 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

Everything seems to be running smoothly with your script,

Just don't forget to assign a width and height to your .box elements:

Check out the live demo on 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 5

Answer №3

It seems like there may be some confusion between setTimeout and setInterval. If you want to understand the difference, take a look at this link.

  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);

Answer 6

It seems like there may be some confusion between setTimeout and setInterval. If you want to understand the difference, take a look at this link.

  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);

Answer 7

Answer №4

There were a few syntax errors in the code snippet, such as missing closing curly brackets }:

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'; // replaced with `getRandomColor()` for testing
    } 
    for (var i = 0; i < box.length; i++) {
      box[i].style.display = "block";
    } 
    createdTime = Date.now();
  } 
}, 100); // replaced with `time` for testing

.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>

Answer 8

There were a few syntax errors in the code snippet, such as missing closing curly brackets }:

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'; // replaced with `getRandomColor()` for testing
    } 
    for (var i = 0; i < box.length; i++) {
      box[i].style.display = "block";
    } 
    createdTime = Date.now();
  } 
}, 100); // replaced with `time` for testing

.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>

What is the best way to apply changes to every class in JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Changing Highcharts Donut Chart Title Text via Legend Item Click in React

The error message from the mongoose plugin is indicating a problem: it seems that the Schema for the model "Appointment" has not been properly registered

"Transforming a static navbar to a fixed position causes the page to jump

Guide to adding up the radio button values with Javascript

Unable to load files in Handlebars when using Node and Express

Update the page when the React route changes

Find the nearest minute when calculating the difference between two dates

Dealing with TypeScript and the Mongoose loadClass problem

Deliver a communication from the dialogue box on the MEAN stack website to the task pane

Generating directives on the fly

unusual behavior observed in addEventListener

Adjust alterations in a Vue Component to apply to separate routes

What methods are available to generate dynamic shapes using HTML?

The error message received is: "mongoose TypeError: Schema is not defined as

React does not recognize data.map as a function

Apply CSS styling (or class) to each element of a React array of objects within a Component

The automated Login Pop Up button appears on its own and does not immediately redirect to the login form

Utilize CSS to vertically align buttons

Nextjs: where all roads lead back to the homepage

Enhancing the efficiency of typed containers in JavaScript