从文本区域的文本框中搜索字符串

Question

按钮 – 调用一个函数来确定是否文本框中的字符串在文本区域的内容中找到。自然，是否找到字符串时向用户发送消息。

这些是要遵循的说明，我不确定具体如何操作。这是我想出的，我不断收到此控制台错误：

TypeError: document.getElementById(...) is null
file:///........program02javascript/program02script.js
Line 10

line 10 : var SearchTerm = document.getElementById("text_box_1").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属性的值从DOM中选择元素不是name 属性。

将 id 属性添加到文本框

Search For:<input type="text" name="text_box_1" id="text_box_1"><br>
//                                              ^^^^^^^^^^^^^^^

您正在使用 match() 检查是否找到匹配项，但您可以使用 indexOf 检查字符串是否存在于另一个中。
如果用户输入了要搜索的任何内容，则添加验证，否则 return。

演示

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>

从文本区域的文本框中搜索字符串

Search for a string from a textbox in a textarea

html

javascript

dom-events