Materialize CSS Dropdown update DOM innerText

Question

I have a dropdown menu made with Materialize CSS. I'm trying to change the text on a "button" when the user clicks it, but for some reason it just won't update the DOM.

var changeText;
changeText = function(){
  if(this.innerText === 'test'){
    this.innerText = 'success';
  } else {
    this.innerText = 'test';
  }
  
  $('.dropdown-trigger').dropdown({
    alignment: 'right',
    constrainWidth: false,
    coverTrigger: false
  });
  
  console.log(this.innerText);
};

$( document ).ready(function() {

  $('.dropdown-trigger').dropdown({
    alignment: 'right',
    constrainWidth: false,
    coverTrigger: false
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#" onclick="changeText()">test</a></li>
</ul>

I've tried re-initializing the dropdown trigger hoping that would update the DOM, but it has no effect. The innerText is changed as expected though as you can see in the console log.

Answer 1

this refers window object here. So try event.target

var changeText;
changeText = function(){
  if(event.target.innerText === 'test'){
    event.target.innerText = 'success';
  } else {
    event.target.innerText = 'test';
  }  
  console.log(this.innerText);
};

$( document ).ready(function() {

  $('.dropdown-trigger').dropdown({
    alignment: 'right',
    constrainWidth: false,
    coverTrigger: false
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#" onclick="changeText()">test</a></li>
</ul>