Functional prograrmming in JS

We are given a new model to work with in ES2015 to define a function object, namely, arrow function syntax.

  const percentHandler = () => {
    document.querySelector('#progress').textContent = `${percent.value}%`;
  };

I’m at an impasse over whether this is proper semantic use of the syntax from a purist view; is it pure? Quite measurably, no, since it interacts with the state of an element node. But JavaScript’s engine permits it. Am I crossing the line by using cheat syntax when clearly there is nothing functional about this example?