How can I set the text and color of the event targ

Question

I am loading an array of items in a Meteor template like so:

{{#each person}}
  <tr>
    <td><input type="checkbox" class="sendtextckbx" checked></td>
    <td>{{per_firstname}}</td>
    <td>{{per_lastname}}</td>
    <td>{{per_streetaddr1}}</td>
    <td>{{per_streetaddr2}}</td>
    <td>{{per_placename}}</td>
    <td>{{per_stateorprov}}</td>
    <td>{{per_zipcode}}</td>
    <td>{{per_emailaddr}}</td>
    <td class="textnum">{{per_phone}}</td>
    <td class="textmorph">Not sent</td>
    <td>{{per_notes}}</td>
  </tr>
{{/each}}

I want to update the td with the id "textmorph" when it is clicked. It starts off containing the text "Not sent" but when the td is clicked, I want it to cycle through other text strings, and change color accordingly, too.

Since there are 1..N instances of this td, I can't just assign to it via the class value, as there will be many sharing the same class (one for each person).

I think I can get the current value via evt.target.value, but I don't know how to set the value. This is my "pseudocode" (also known as a wild guess):

Template.peopleGrid.events({
  'click #btnTextChecked': function() {
    alert('you clicked the btnTextChecked button');
  },
  'click #textmorph': function(evt) {
    var currentText = evt.target.value;
    alert(currentText);
    if (currentText === 'Not sent') {
      evt.target.value = 'Sent';
      evt.target.color = amber;
    }
    else if (currentText === 'Sent') {
      evt.target.value = 'Need Help';
      evt.target.color = red;
    }
    else if (currentText === 'Not sent') {
      evt.target.value = 'Are OK';
      evt.target.color = green;
    }
  }
});

...but I'm not confident it's even close to being what it should be. In fact, when I test it out, ~

So how can I act on the selected tds, changing the text and the color? The app runs with the code above, but gives me an "undefined" alert when I click the "Not sent" tds.

Answer 1

You are not too far. In pure javascript, you actually get and set an element's content through its innerHTML property. As for the color, you set it through style.color. And use quotes around color names!

Therefore:

Template.peopleGrid.events({
  'click #btnTextChecked': function() {
    alert('you clicked the btnTextChecked button');
  },
  'click #textmorph': function(evt) {
    var clicked = evt.target;
    var currentText = clicked.innerHTML;
    alert(currentText);
    if (currentText === 'Not sent') {
      clicked.innerHTML = 'Sent';
      clicked.style.color = 'amber';
    }
    else if (currentText === 'Sent') {
      clicked.innerHTML = 'Need Help';
      clicked.style.color = 'red';
    }
    else if (currentText === 'Need Help') {
      clicked.innerHTML = 'Are OK';
      clicked.style.color = 'green';
    }
  }
});