CODEWITHSUNDEEP
documentwords
Wolk
Wolk

Reputation: 103

searching for elements

I was assigned homework in which I had to take the given HTML file and create a Javascript file which would search for words within a div class. I have to use both document.getElementById() and .querySelectorAll.

Upvotes: 1

Views: 92

Answers (4)

Kristianmitk
Kristianmitk

Reputation: 4778

  • get the value of the input field with document.getElementById("searchtext").value
  • document.querySelectorAll('.main') returns a NodeList on which you can use the values() function that will return an iterator over all the node values in the list
  • use then for(var el of elements.values()) and check for every element if it occurs

Demo:

function search() {
    var searchText = document.getElementById("searchtext").value,
        elements = document.querySelectorAll('.main');
        
    for(var el of elements.values()) { 
      var idx = el.innerHTML.indexOf(searchText);
      if(idx != -1){
        console.log("Found at: ", idx);
      }
      
    }

}
<head>
        <script src = "first.js" type = "text/javascript"></script>
        <link href= "dirststyle.css"  type = "text/css" rel = "stylesheet"/>
    </head>

    <body>

        <div class="main">

            <p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>

            <p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>

            <p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>

            <ul>
                <li>Richard L. Bloch, investment broker/real estate developer...</li> 
                <li>Karl Eller, outdoor advertising company owner and former...</li>
                <li>Donald Pitt, Tucson-based attorney;</li>
                <li>Don Diamond, Tucson-based real estate investor.</li>
            </ul>

        <p>Page by New Person. <br /> Some (all) information taken from Wikipedia.</p>

        </div>

        <hr />

        <div>

            Search for text:
            <input id="searchtext" type="text"  /> 
            <button id="searchbutton" onclick="search()">Search</button>
        </div>

    </body>

Upvotes: 1

AquaDev
AquaDev

Reputation: 60

So you should add a onclick function on the button which should be like this <button id=“searchbutton”, onclick=“Search()”>Search</button> And also i don’t think “document.getElementById(“searchtext”).querySelectorAll(“main”);” would work beacuse you should do it in seperate variables like one for search text one for selection. Hope this helps!

Upvotes: 1

Sebastian Speitel
Sebastian Speitel

Reputation: 7346

You have to store the value you are searching for in a variable (search). You get this value by calling the property .value of an <input> tag, which you can select, as you did already by using document.getElementById("searchtext"). Then store the elements you want to search in in another variable, in this case an array by using document.getElementsByClassName("main") (notice the getElementsByClassName which indicates it returns a collection). And you have to call your function somewhere. I just added it to the button onclick event in this line:

<button id="searchbutton" onclick="search()">Search</button>


function search() {
  var search = document.getElementById("searchtext").value;
  var elements = document.getElementsByClassName("main");

  for (var i = 0; i < elements.length; i++) {
    if (elements[i].innerHTML.indexOf(search) > -1) {
      alert('found');
    }
  }
}
<div class="main">

  <p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>

  <p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>

  <p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>

  <ul>
    <li>Richard L. Bloch, investment broker/real estate developer...</li>
    <li>Karl Eller, outdoor advertising company owner and former...</li>
    <li>Donald Pitt, Tucson-based attorney;</li>
    <li>Don Diamond, Tucson-based real estate investor.</li>
  </ul>

  <p>Page by New Person. <br /> Some (all) information taken from Wikipedia.</p>

</div>

<hr />

<div>

  Search for text:
  <input id="searchtext" type="text" />
  <button id="searchbutton" onclick="search()">Search</button>
</div>

Upvotes: 1

dave
dave

Reputation: 64657

You need to get the elements with: document.querySelectorAll(".main"); and then you need to get the search with document.getElementById("searchtext"), and then you can add use addEventListener to make it run your function when a click event occurs:

function Search() 
{
    var elements = document.querySelectorAll(".main");
    let search = document.getElementById('searchtext').value;
    for (var i = 0; i < elements.length; i++)
    {
        if(elements[i].innerHTML.indexOf(search) > - 1)
        {
            alert('found');
        }
    }

}

document.getElementById('searchbutton').addEventListener('click', Search);
    <body>

        <div class="main">

            <p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>

            <p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>

            <p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>

            <ul>
                <li>Richard L. Bloch, investment broker/real estate developer...</li> 
                <li>Karl Eller, outdoor advertising company owner and former...</li>
                <li>Donald Pitt, Tucson-based attorney;</li>
                <li>Don Diamond, Tucson-based real estate investor.</li>
            </ul>

        <p>Page by New Person. <br /> Some (all) information taken from Wikipedia.</p>

        </div>

        <hr />

        <div>

            Search for text:
            <input id="searchtext" type="text"  /> 
            <button id="searchbutton">Search</button>
        </div>

    </body>

Upvotes: 2

Related Questions