Javascript，未捕获的 ReferenceError：未定义变量

Question

我是Javascript的新手，我试图将两个参数传递给一个函数，该函数然后通过表单提交它们，但是当我单击充当函数调用者的图像时，我收到 ReferenceError 。这些是我的输入、一个文本区域和三个单选按钮：

<label for="searchString">

   <input type="text" id="searchString" name="searchString" maxlength="20"> </br>

</label>

<section id="searchMode" style="margin-top: 3px; margin-bottom: 2px">

   <input type="radio" id="Title" name="searchMode" value="Title"/>

   <label for="Title">Title</label>

   <input type="radio" id="Author" name="searchMode" value="Author"/>

   <label for="Author">Author</label>

   <input type="radio" id="Number" name="searchMode" value="Number"/>

   <label for="Number">Number</label>

</section>

这是搜索功能：

<script>

   s = document.getElementById("searchString").value;

   opt = document.querySelector('input[name="searchMode"]:checked').value;

</script>

<section style="margin-top: 3px;">

   <a href="javascript:search(s,opt)">

       <img alt="search" id="searchImage" src="images/search.png" width="22" height="22">

   </a>

</section>

我看到的错误消息是：

未捕获的 ReferenceError：opt 未定义

let我已经尝试过在没有or 的情况下声明这两个变量，var但这似乎不起作用，我该如何修复我的代码以免出现此错误？

编辑：我认为问题可能是我无法将参数从表单正确传递到控制器；搜索功能被调用，我没有收到任何错误，但它们被接收为undefined. 这是形式和功能：

<form name="searchForm" method="post" action="Dispatcher">

   <input type="hidden" name="searchString"/>

   <input type="hidden" name="searchMode"/>

   <input type="hidden" name="controllerAction" value="ProductsManagement.view"/>

</form>

function search(s,opt){

   const f = document.searchForm;

   f.searchString.value = s;

   f.searchMode.value = opt;

   f.submit();

}

Answer 1

这将修复它的变化：该函数现在是一个函数，它使用 onclick() 而不是 href 运行，要获取按钮的值属性，我们需要使用 getAttribute，最后保留下划线和紫色（因为我们删除了href）我们需要添加：style="text-decoration: underline; color: purple;"<label>&nbsp; &nbsp;<input type="text" id="searchString" name="searchString" maxlength="20"></label><section id="searchMode" style="margin-top: 3px; margin-bottom: 2px">&nbsp; &nbsp;<input type="radio" id="Title" name="searchMode" value="Title"/>&nbsp; &nbsp;<label for="Title">Title</label>&nbsp; &nbsp;<input type="radio" id="Author" name="searchMode" value="Author"/>&nbsp; &nbsp;<label for="Author">Author</label>&nbsp; &nbsp;<input type="radio" id="Number" name="searchMode" value="Number"/>&nbsp; &nbsp;<label for="Number">Number</label></section><script>&nbsp; function search(){&nbsp; &nbsp; console.log('here')&nbsp; &nbsp; let s = document.getElementById("searchString").value;&nbsp; &nbsp; let opt = document.querySelector('input[name="searchMode"]:checked')&nbsp; &nbsp; if(opt){&nbsp; &nbsp; &nbsp; &nbsp;opt = opt.getAttribute('value');&nbsp; &nbsp; }&nbsp; &nbsp; console.log(opt)&nbsp; &nbsp; console.log(s)&nbsp; }</script><section style="margin-top: 3px;">&nbsp; &nbsp;<a onclick='window.search()' style="text-decoration: underline; color: purple;">&nbsp; &nbsp; &nbsp; &nbsp;<img alt="search" id="searchImage" src="images/search.png" width="22" height="22">&nbsp; &nbsp;</a></section>

Answer 2

s并且opt未在您的锚点范围内定义。它们似乎在别处定义。考虑将其更改为以下内容：<a onclick="search"><img ...></a>然后，在您的搜索中<script>&nbsp; &nbsp;s = document.getElementById("searchString").value;&nbsp; &nbsp;opt = document.querySelector('input[name="searchMode"]:checked').value;&nbsp; &nbsp;search(s,opt);</script>

Answer 3

你searchString没有任何价值，所以当你试图访问它的价值时，它会给你错误。因此，为此您需要为其分配一个值。例如<label for="searchString">&nbsp; <input type="text" id="searchString" name="searchString" maxlength="20"&nbsp;&nbsp; value&nbsp;&nbsp; = "search" > </br></label>完全一样当你没有检查任何选项时radio-button它会给出错误，因为在那个特定的时间它不会有任何价值。因此，您必须为各个元素分配值。