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 acplish this task? I'm not sure I understand pletely what to do. I was trying to find some example code but haven't e across anything that's been helpful.

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 acplish this task? I'm not sure I understand pletely what to do. I was trying to find some example code but haven't e across anything that's been helpful.

• javascript
• html
• dom-events

Share Improve this question Follow edited Oct 27, 2019 at 16:27 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 4, 2015 at 3:24 kronis72kronis72 31111 gold badge55 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>

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>