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

displaying a Google Map within a designated container

Javascript alert: An issue has been detected when attempting to open a URL along with the user's input through Javascript

Accessing an array of objects within nested objects results in an undefined value

Fixing the issue of a div exceeding the height of its parent div in Tailwindcss

making changes to the JS node dependency package results in a syntax error during compilation process, particularly within the npm/Vue.js environment

Vue composable yields a string value

The delete function is not functioning

Is there a way to store a JSON object retrieved from a promise object into a global variable?

Remove the initial 15,000 lines from a text file using Node.js

Execute a jQuery ajax request to a specific variable

Struggling with uploading files in AngularJS?

Exploring jQuery: Moving between different table cells using traversal techniques

How can I write this to function on click events?

What is the process of overriding methods in a function-based component in React?

What design pattern serves as the foundation for Angularjs? Is mastering just one design pattern sufficient?

Is there a way to establish communication between two ReactJS components by utilizing Jotai?

AWS Lambda Error: Module not found - please check the file path '/var/task/index'

Is it possible to pass the index variable of a for loop to a different function?

How come I am unable to reach the window in my Next.js application's '_app.js' file?

The onchange function seems to be malfunctioning when attempted with AJAX