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

【问题标题】：Javascript, Uncaught ReferenceError: variable is not definedJavascript，未捕获的 ReferenceError：未定义变量
【发布时间】：2021-02-08 04:24:13
【问题描述】：

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

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

我看到的错误信息是：

Uncaught ReferenceError: opt is not defined

我尝试过声明这两个变量而不使用let 或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();
}

【问题讨论】：

@CertainPerformance 我在控制台中得到的错误信息是：Uncaught ReferenceError: opt is not defined
您确定不想在搜索函数中创建 s 和 opt 变量吗？然后它们的值将与表单保持一致。
现在 opt 和 s 变量将在页面加载时设置一次，但是当表单更改并单击单击处理程序时，将获得原始值。除非我弄错了。
我不知道为什么您的“href=JavaScript:”网址不起作用。但是你应该能够使用 addEventListener 来做同样的事情。无论如何，这被认为是一种更现代的方式。

标签： javascript html

【解决方案1】：

这将修复它的更改：该功能现在是一个功能，它使用 onclick() 而不是 href 运行，要获取按钮的 value 属性，我们需要使用 getAttribute，最后，为了保留下划线和紫色（因为我们删除了 href），我们需要添加： style="文字装饰：下划线；颜色：紫色；"

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

【讨论】：

很好?很乐意提供帮助

【解决方案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>

【讨论】：

我认为这不会像 OP 试图做的那样。当我认为他们想在单击按钮或链接时运行它时，它会在页面加载时运行搜索

【解决方案3】：

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

<label for="searchString">
  <input type="text" id="searchString" name="searchString" maxlength="20" 
  value 
  = "search" > </br>
</label>

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

所以你必须为各个元素赋值。

【讨论】：