Help

Kindly help
why this code is not working,
search example on mdn
when I replicated it, it just throw contact not found result.
what is wrong I cant figure it out pls help
I am learning
thank you !

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() {
  let searchName = input.value.toLowerCase();
  input.value = "";
  input.focus();
  for(let i = 0;i < contacts.length; i++) {
    let splitContact = contacts[i].split(":");
    if (splitContact[0].toLowerCase === searchName) {
      para.textContent = splitContact[0] + " number is " + splitContact[1] + ".";
      break;
    } else if (i===contacts.length - 1) {
      para.textContent = "contact not found.";
    }
}
});
``!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>search</title>
</head>
<body>
    <label for="search"> search by name</label>
    <input id="search" type="text">
    <button>search</button>
    <p></p>
<script src="./search.js"></script>
</body>
</html>`

type or paste code here

Can you provide your HTML as well?

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>search</title>
</head>
<body>
    <label for="search"> search by name</label>
    <input id="search" type="text">
    <button>search</button>
    <p></p>
<script src="./search.js"></script>
</body>
</html>

Sorry, just saw that you provided it already.
.toLowerCase() is a method. You have to call it in order to alter the value. So write:
if (splitContact[0].toLowerCase() === searchName) instead of:

(Appears twice)

1 Like