Question

I have a JS function activating after an onclick event on an A tag. Here is the code :

(function(MTM) {
  MTM.selectAllNone = function(e) {
    var string = e.target.textContent || e.srcElement.innerText;
    var list = document.getElementById('my-div');
    var inputs = list.getElementsByTagName('input');
    var length = inputs.length;
    if (string == 'Select all') {
      for (var i=0; i<length; i++) {
        if (inputs[i].getAttribute('type') == 'checkbox') {
          inputs[i].setAttribute('checked', 'checked');
        }
      }
      string = 'Select none';
    }
    else {
      for (var i=0; i<length; i++) {
        if (inputs[i].getAttribute('type') == 'checkbox') {
          inputs[i].removeAttribute('checked');
        }
      }
      string = 'Select all';
    }
  };
}(window.MTM = window.MTM || {}));

And on the A tag, here it goes :

<a href="javascript:void(0);" onclick="MTM.selectAllNone(event);">Select all</a>

Now, while debugging, I can see that “string” contains the text “Select all”. It goes well through the if (string == 'Select all'). And the line string = 'Select none'; does change the string variable. But it doesn’t change the text of the anchor tag.

Maybe something obvious?

Answer 1

var string = e.target.textContent does not mean that string becomes an alias for e.target.textContent, it means that the string points to the same value. When you do string = "blah" you are just pointing string at a different value. You need to point the property .textContent of e.target at the value new value you want.

if (e.target.textContent != null) e.target.textContent = "Select all"
if (e.srcElement.innerText != null) e.srcElement.innerText = "Select all"