JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
  <font id="text1" class="text">I walked in the forest</font>
  <br>
  <font id="text2" class="text">Through the grey concrete path</font>
  <br>
  <font id="text3" class="text">Holding on the dog</font>
</div>

<button id="invertcolors">
</button>
</button>

JavaScript

var text = document.getElementsByClassName('text');
var button = document.getElementById('invertcolors');

function onClick() {
var selectedId
console.log(text[0].getAttribute( 'id' ));
  for (var i = 0; i < text.length; i++) {
   console.log(text[i].getAttribute('id'));
   selectedId = text[i].getAttribute('id');
   document.getElementById(selectedId).style.color = "white";
  }
}

button.addEventListener('click', onClick, false);