examples/JavaScript/search-contacts.html at master · sromanowski12/examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Simple contact search example</title>
    <style></style>
  </head>

  <body>
    <label for="search">Search by contact name: </label>
    <input id="search" type="text" /> <button>Search</button>

    <p></p>

    <script>
      const contacts = [
        "Chris:2232322",
        "Sarah:3453456",
        "Bill:7654322",
        "Mary:9998769",
        "Dianne:9384975"
      ];
      const para = document.querySelector("p");
      const input = document.querySelector("input");
      const btn = document.querySelector("button");
      btn.addEventListener("click", function() {
        const searchName = input.value;
        input.value = "";
        input.focus();
        for (let i = 0; i < contacts.length; i++) {
          let splitContact = contacts[i].split(":");
          if (splitContact[0] === searchName) {
            para.textContent =
              splitContact[0] + "'s number is " + splitContact[1] + ".";
            break;
          } else {
            para.textContent = "Contact not found.";
          }
        }
      });
    </script>
  </body>
</html>