problem passing variable from HTML to JS for AJAX request in WordPress

Solution:

It’s because you st your variable at the documentReady event callback. So the var has the default value (the value at the documentReady moment).

move it in the submit event:

// This does the ajax request (The Call).

$( ".chartsearch" ).click(function() {
  let str = document.getElementById('gen').value;
  $.ajax({
      url: ajaxurl, // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
      data: {
          'action':'example_ajax_request', // This is our PHP function below
          'str' : str // This is the variable we are sending via AJAX
      },
      success:function(data) {
  // This outputs the result of the ajax request (The Callback)
          $("#results").text(data);
      },
      error: function(errorThrown){
          window.alert(errorThrown);
      }
  });
});