Ad

Meteor Java Script How To Change Background Color In A Cell

- 1 answer

I googled alot about this Questions but sadly cant get it resolved. What I want to accomplish is if a cell reached the status 2 it should get red. It leads me to document.getElementById('statusOfCell').style.backgroundColor = 'red'; which will work if I add it to my html site with the script tags but not within my meteor Application.

hello.html

<head>
  <title>hello</title>
</head>

<body>
  <h1 style="background-color: aqua">Welcome to Meteor!</h1>
  {{> liste}}
</body>

<template name="liste">
  <table>
    {{#each listItem}}
        <tr class="{{listOfNumbers}}">
      <td id="statusOfCell">{{status}}</td>
        </tr>
    {{/each}}
  </table>
</template>

hello.js

if (Meteor.isClient) {
   Template.liste.helpers({
        listItem: [{status: 1}, {status: 1}, {status: 2}, {status: 1}],
    'listOfNumbers': function(){
        var listStatus = this.status;
         console.log(listStatus);
            if(listStatus == 2){
              statusOfCell=status;          
  document.getElementById('statusOfCell').style.backgroundColor = 'red';
            }
     }
   })
  }

The console.log shows me the correct numbers. The Error Message is: Cannot read property 'style' of null at Object which occures because: document.getElementById() = null.

Ad

Answer

Your Id is duplicated by the loop, thus it cannot find the correct Id to set the color. There are several problems with your code though

  • listOfNumbers: is a helper function, so it should return something for the class on the template
  • Do not change the background when rendering the page through the loop. Instead, return the correct css class and then, specify the color for that css class
Ad
source: stackoverflow.com
Ad