Reputation: 37

Change the background color of specific cells

I have made this Formative Assessments Tracker for my school such that the number inputed in the required is the basis if the cell's background color will either be green if they are the same and red if they are not.

It is functionioning but it only affects the first cell. I am wondering if I have to make the id's different or if there is a way to do it in a much shorter and less hectic way so that all cells get affected with the one click of the button.

<html>
    <head>
        <title>Formative Assessments Tracker</title>
    </head>

    <body>
        <style>
            body {
                font-family: helvetica;
                font-size: 20px;
                padding: 40px;
                text-align: center;
            }
            td {
                padding: 20px;
                text-align: center;
            }
            .green {
                background-color: green;
                padding: 10px;
                text-align: center;
            }
            .gray {
                background-color: gray;
                padding: 50px;
                text-align: center;
            }
            .red {
                background-color: red;
                padding: 10px;
                text-align: center;
            }
            .white {
                background-color: white;
                padding: 10px;
                text-align: center;
            }
        </style>

        <body>
            <h3>HIGH SCHOOL</h3>
            <h2>FORMATIVE ASSESSMENTS TRACKER</h2> # of FAs that should have been submitted:
            <input type="text" id="required">
            <button onclick="submission()">Submit</button>

            <script>
                function submission() {
                    var r = document.getElementById("required").value;
                    var s = document.getElementById("submitted").value;
                    if (r == s) {
                        document.getElementById('name').style.backgroundColor = "green";
                    } else {
                        document.getElementById('name').style.backgroundColor = "red";
                    }
                }
            </script>

            <table border="1">

                <tr>
                    <td id="name" class="green">NAME</td>
                    <td id="name" class="green">NAME</td>


     <td id="name" class="green">NAME</td>
            </tr>
            <tr>
                <td class="gray" </td>
                    <td class="gray" </td>
                        <td class="gray" </td>
            </tr>
            <tr>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
            </tr>

            <tr>
                <td id="name" class="green">NAME</td>
                <td id="name" class="green">NAME</td>
                <td id="name" class="green">NAME</td>
            </tr>
            <tr>
                <td class="gray" </td>
                    <td class="gray" </td>
                        <td class="gray" </td>
            </tr>
            <tr>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
            </tr>

            <tr>
                <td id="name" class="green">NAME</td>
                <td id="name" class="green">NAME</td>
                <td id="name" class="green">NAME</td>
            </tr>
            <tr>
                <td class="gray" </td>
                    <td class="gray" </td>
                        <td class="gray" </td>
            </tr>
            <tr>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
            </tr>

        </table>

    </body>

Upvotes: 0

Answers (3)

Hatchet

Reputation: 5428

I am wondering if I have to make the id's different

YES

Unique id's are required.

or if there is a way to do it in a much shorter and less hectic way

YES

Make sure your inputs have something in common, then use any of the following (non-exhaustive list):

For example, change all of your duplicate id's of submitted and name to classes, then use getElementsByClassName and a loop or [].forEach.call.

Also, <td class="gray"</td> is invalid HTML. You need another closing angle bracket: <td class="gray"></td>.

function submission () {
    var r = document.getElementById('required').value,
        s = document.getElementsByClassName('submitted'),
        n = document.getElementsByClassName('name');

    for (var i = 0; i < s.length; i++) {
        if (r === s[i].value)
            n[i].style.backgroundColor = 'green';
        else
            n[i].style.backgroundColor = 'red';
    }
}

body {
    font-family: helvetica;
    font-size: 20px;
    padding: 40px;
    text-align: center;
}

td {
    padding: 20px;
    text-align: center;
}

.green {
    background-color: green;
    padding: 10px;
    text-align: center;
}

.gray {
    background-color: gray;
    padding: 50px;
    text-align: center;
}

.red {
    background-color: red;
    padding: 10px;
    text-align: center;
}

.white {
    background-color: white;
    padding: 10px;
    text-align: center;
}

<h3>HIGH SCHOOL</h3>
<h2>FORMATIVE ASSESSMENTS TRACKER</h2> # of FAs that should have been submitted:
<input type="text" id="required">
<button onclick="submission()">Submit</button>
<table border="1">
    <tr>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
    </tr>
    <tr>
        <td class="gray"></td>
        <td class="gray"></td>
        <td class="gray"></td>
    </tr>
    <tr>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
    </tr>

    <tr>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
    </tr>
    <tr>
        <td class="gray"></td>
        <td class="gray"></td>
        <td class="gray"></td>
    </tr>
    <tr>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
    </tr>

    <tr>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
    </tr>
    <tr>
        <td class="gray"></td>
        <td class="gray"></td>
        <td class="gray"></td>
    </tr>
    <tr>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
    </tr>
</table>

Upvotes: 1

Alexander Perea Artunduaga

Reputation: 71

I modified your code to fix your problem.

The answer is yes you should use different Ids for every element. But you could use classes to kind of 'group' elements and then get them using methods like getElementsByClassName I implemented classes and the method getElementsByClassName in your code, and now it's working.

here is your the code:

<html>

<head>
  <title>Formative Assessments Tracker</title>

  <style>
    body {
      font-family: helvetica;
      font-size: 20px;
      padding: 40px;
      text-align: center;
    }

    td {
      padding: 20px;
      text-align: center;
    }

    .green {
      background-color: green;
      padding: 10px;
      text-align: center;
    }

    .gray {
      background-color: gray;
      padding: 50px;
      text-align: center;
    }

    .red {
      background-color: red;
      padding: 10px;
      text-align: center;
    }

    .white {
      background-color: white;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>

<body>



  <h3>HIGH SCHOOL</h3>
  <h2>FORMATIVE ASSESSMENTS TRACKER</h2>
  # of FAs that should have been submitted:
  <input type="text" id="required">
  <button onclick="submission()">Submit</button>

  <script>
    function submission() {
      var r = document.getElementById("required").value;
      var sElements = document.getElementsByClassName("submitted");
      for (i = 0; i < sElements.length; i++) {
        if(sElements[i].value == r){
          sElements[i].style.backgroundColor = "green";
        }else{
          sElements[i].style.backgroundColor = "red";
        }
      }
    }
  </script>

  <table border="1">

    <tr>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
    </tr>
    <tr>
      <td class="gray" </td>
        <td class="gray" </td>
          <td class="gray" </td>
    </tr>
    <tr>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
    </tr>

    <tr>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
    </tr>
    <tr>
      <td class="gray" </td>
        <td class="gray" </td>
          <td class="gray" </td>
    </tr>
    <tr>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
    </tr>

    <tr>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
    </tr>
    <tr>
      <td class="gray" </td>
        <td class="gray" </td>
          <td class="gray" </td>
    </tr>
    <tr>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
    </tr>

  </table>

</body>

</html>

Upvotes: 2

Blue Boy

Reputation: 610

Try using the class names instead of id's:

<script>
    function submission(){
       var r = document.getElementById("required").value;
       var s = document.getElementById("submitted").value;
       if (r==s){
           document.getElementsByClassName('green').style.backgroundColor="green";
       }
       else{
           document.getElementsByClassName('green').style.backgroundColor="red";
       }
     }
</script>

Upvotes: 1

Change the background color of specific cells

Answers (3)

Related Questions