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>

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

</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>

  function search(){

    console.log('here')

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

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

    if(opt){

       opt = opt.getAttribute('value');

    }

    console.log(opt)

    console.log(s)

  }

</script>

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

   <a onclick='window.search()' style="text-decoration: underline; color: purple;">

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

   </a>

</section>

Answer 2

s并且opt未在您的锚点范围内定义。它们似乎在别处定义。考虑将其更改为以下内容：

<a onclick="search"><img ...></a>

然后，在您的搜索中

<script>

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

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

   search(s,opt);

</script>

Answer 3

你searchString没有任何价值，所以当你试图访问它的价值时，它会给你错误。因此，为此您需要为其分配一个值。例如

<label for="searchString">

  <input type="text" id="searchString" name="searchString" maxlength="20" 

  value 

  = "search" > </br>

</label>

完全一样当你没有检查任何选项时radio-button它会给出错误，因为在那个特定的时间它不会有任何价值。

因此，您必须为各个元素分配值。