3

Button – calls a function to determine if the string in the textbox is found in the contents of the textarea. Naturally, message to the user if the string was found or not.

Those were the instructions given to follow, Im not sure exactly how to do this. Here is what I came up with, I keep getting this console error:

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

line 10 : var SearchTerm = document.getElementById("text_box_1").value;

Here is my 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>

Here is my 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");
    }
}

How can I accomplish this task? I'm not sure I understand completely what to do. I was trying to find some example code but haven't come across anything that's been helpful.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
kronis72
  • 303
  • 1
  • 4
  • 11

2 Answers2

3

  1. You haven't added id to the element, getElementById selects the element from DOM based on the value of id attribute not the name attribute.

    Add the id attribute to the textbox

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

  2. You're using match() to check if the match is found, but you can use indexOf to check if the string is present in another.

  3. Add validation if the user has entered anything to search, if not return.

Demo

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>
Tushar
  • 85,780
  • 21
  • 159
  • 179
  • mmm ok, thanks alot! If I wanted to display say the sentence in which it was found or in some manner that shows where it was found... how would I go about doing that? is it simply adding a few more lines of code, or would you have to go about it in a completly different manner? – kronis72 Sep 04 '15 at 03:37
  • @kronis72 When you use `indexOf()`, you'll get the index of the word where match is found, you can use this index to extract sentence/word – Tushar Sep 04 '15 at 03:38
  • can we highlight the found keyword on textarea? How ?Thanks – user1788736 Jun 03 '19 at 10:31
  • If anyone is still looking how to highlight found keyword on textarea, here is the working solution: https://stackoverflow.com/questions/63793518/how-to-select-a-word-or-a-phrase-in-a-text-area-in-javascript – Robert Sep 19 '21 at 10:16
0

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>
satya
  • 84
  • 8