Question

按钮 - 调用函数来确定是否文本框中的字符串位于textarea的内容中。自然，如果找到字符串，则向用户发送消息。

这些是给出的指示，我不确定如何做到这一点。这是我想出的，我不断收到此控制台错误：

TypeError：document.getElementById（...）为null file：///avascriptprogram02javascript/program02script.js 第10行

第10行：var SearchTerm = document.getElementById（＆＃34; text_box_1＆＃34;）。value;

这是我的HTML：

<div id="requirement #2">
    <h1>Requirement #2</h1>
    <form>
        Search For:
        <input type="text" name="text_box_1">
        <br>
    </form>
    <textarea id="text_area_3"></textarea>
    <button type="button" id="button2" onclick="StringSearch()">Search</button>
</div>

这是我的Javascript：

function StringSearch() {
    var SearchTerm = document.getElementById("text_box_1").value;
    var TextSearch = document.getElementById("text_area_3").value;

    if (TextSearch.match(SearchTerm) === "") {
        alert("String Found. Search Complete");
    } else {
        alert("No Data found in Text Area");
    }
}

我该如何完成这项任务？我不确定我完全理解该怎么做。我试图找到一些示例代码，但没有发现任何有用的东西。

Answer 1

您尚未向元素添加id，getElementById根据id属性的值而不是name属性从DOM中选择元素。

将id属性添加到文本框
```
Search For:<input type="text" name="text_box_1" id="text_box_1"><br>
//                                              ^^^^^^^^^^^^^^^
```
您正在使用match()检查是否找到匹配项，但您可以使用indexOf检查该字符串是否存在于另一个字符串中。
如果用户输入了要搜索的内容，则添加验证，如果没有，则返回。

<强>演示

function StringSearch() {
  var SearchTerm = document.getElementById("text_box_1").value;
  var TextSearch = document.getElementById("text_area_3").value;

  if (SearchTerm.length > 0 && TextSearch.indexOf(SearchTerm) > -1) {
    alert("String Found. Search Complete");
  } else {
    alert("No Data found in Text Area");
  }
}

<div id="requirement #2">
  <h1>Requirement #2</h1>
  <form>
    Search For:
    <input type="text" name="text_box_1" id="text_box_1">
    <br>
  </form>
  <textarea id="text_area_3"></textarea>
  <button type="button" id="button2" onclick="StringSearch()">Search</button>
</div>

Answer 2

function StringSearch() {
  var SearchTerm = document.getElementById("text_box_1").value;
  var TextSearch = document.getElementById("text_area_3").value;

  if (SearchTerm.length > 0 && TextSearch.indexOf(SearchTerm) > -1) {
    alert("String Found. Search Complete");
  } else {
    alert("No Data found in Text Area");
  }
}

<div id="requirement #2">
  <h1>Requirement #2</h1>
  <form>
    Search For:
    <input type="text" name="text_box_1" id="text_box_1">
    <br>
  </form>
  <textarea id="text_area_3"></textarea>
  <button type="button" id="button2" onclick="StringSearch()">Search</button>
</div>

从textarea中的文本框中搜索字符串

2 个答案: