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

Question

按鈕 - 調用函數以確定在文本框的內容中是否找到文本框中的字符串 。當然， 消息給用戶，如果字符串被找到或沒有。

這些是給出的指示，我不知道如何做到這一點。以下是我想出了，我不斷收到此控制檯錯誤：

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

線10：VAR SEARCHTERM =的document.getElementById（ 「text_box_1」）值;

這裏是我的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

1. 你還沒有添加id到元件，getElementById選擇來自DOM基於的id的值的元素屬性不是name屬性。

   的id屬性添加到文本框

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

2. 您使用match()檢查，如果發現匹配，但可以使用indexOf檢查字符串是否存在於另一個。

3. 如果用戶輸入了任何要搜索的內容，如果不返回，則添加驗證。

演示

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>