Javascript 事件处理程序在页面开始处而不是在输入时按键加载

我有一个HTML输入框，希望使用jQuery在输入时获取用户输入的值，但是DOM似乎在页面加载时被激活，并且在用户输入时它从不获取输入框的值。我是新手，不知道我做错了什么，任何想法都会很感激

<input id="textFilter" type="text">

function addEventHandlerForSearch() { //Javascript Handler
  $('#textFilter').val();
  $('#searchText').text($('#textFilter').val());
  let searchVal = $('#searchText').text();

  $(document).ready(function() { // DOM
    $('#textFilter').keypress(addEventHandlerForSearch());
    loadSavedRunkeeperTweets().then(parseTweets);
  });

函数addEventHandlerForSearch（）{//Javascript处理程序
$（'#textFilter'）.val（）；
$（'#searchText'）.text（$（'#textFilter'）.val（））；
让searchVal=$（'#searchText'）.text（）；
$（文档）.ready（函数（）{//DOM
$（'#textFilter'）。按键（addEventHandlerForSearch（））；
loadSaveDubleePertweets（）。然后（解析tweets）；
});

在键入文本框时获取其值的简单普通实现如下：

const input = document.getElementById('textFilter');

input.onkeyup = () => {
    console.log(input.value)
}

---

然后你可以对这些数据做任何你需要做的事情。如果jquery是一项要求，我很抱歉没有在我的回答中包括这一点。这不是我的专业领域lol。

显示HTML和CSS代码，并使其在stackoverflow上运行。$（文档）。ready和AddedEventHandlerForSearch（）应该是两个独立的函数。