I have following Code. But the String in the Database is empty. Why does it not work to get the string from the input field?

HTML

 <div id="todo">
   <h2>Todo Liste</h2> 
   <form method="get">
     <input type="text" name="username" placeholder="name" required>
     <input type="text"  class="inputField" name="inputData" id="myInput" placeholder="title"  required><br><br>
     <span onclick="newElement(); sendData(this.value)" class="addBtn">Add</span><br><br>
    </form>

JavaScript

function sendData(str) {
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.onload = function() {
    document.getElementById("txtHint").innerHTML = this.responseText;
  }
  xmlhttp.open("GET", "saveData.php?q=" + str);
  xmlhttp.send();
}

To get the Value on the html page:

<p>Response from PHP <span id="txtHint"></span></p> 

to bring the data in the html

function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
    li.appendChild(t);
  
      document.getElementById("myUL").appendChild(li);
    
  }

and i want to get the data of the text, a user typed in. this is where i fail.

My idea was

console.log(document.getElementsByClassName("inputField"));

How can I get the element?