Javascript 单击按钮时使用JS读取JSON文件

我试图解决一个问题，用户在搜索框中输入值，按下搜索按钮，然后通过onClick事件将搜索项与JSON文件中的值进行比较。目前我不知道jQuery，因此如果在解决方案中可以避免这种情况，我将不胜感激！到目前为止，我得到的是：

<div id="searchb">
    <button onclick="userSearch()">Search</button>
</div>

搜寻

这是搜索按钮的一个简单div，它调用处理JSON文件的userSearch函数：

<script>
<!--Function which compares inputted name to names in the .json file. -->
function userSearch(thearr) {

... <!-- All of the code that compares the values -->

console.log();
}
</script>

<script src="filepath on my machine">
</script> <!-- Source path to .json file for script -->

功能用户搜索（THARR）{
... 
console.log（）；
}

我遇到的问题是onClick事件中的函数没有传递任何参数，因为在到达script标记之前，userSearch的参数没有定义。当我运行这个“小程序”时，我得到一个错误，表示参数thearr未定义

文件路径是正确的，因为我用它来解决一个类似的问题，在页面加载时自动从JSON文件生成结果，问题似乎在于单击按钮。任何关于如何解决这个问题的想法都将不胜感激！谢谢

编辑：按要求搜索框HTML

<div id="textboxes">
<textarea id="input1" placeholder="First Name" rows="1" cols="10">
</textarea>
<textarea id="input2" placeholder="Surname" rows="1" cols="10"></textarea>
</div>

---

根据您的问题，听起来您需要从用户输入中获取值。对于userSearch（thearr），我不确定您期望的thearr是什么。您可以按如下方式获取用户输入的值：

 function userSearch() {
        var firstName = document.getElementById("input1").value;
        var surName = document.getElementById("input2").value;
        console.log(firstName + " " + surName);
    }

---

注意：如果您希望处理多个名字/姓氏，您应该重新考虑体系结构。使用当前设置执行此操作的逻辑编写起来并不简单，更重要的是不必要

你能为用户输入姓名的搜索框添加html吗？@KarlP.Galvez在末尾添加了它。