Cannot read properties of undefined (reading 'toLowerCase')

  • Autor Autor jhonhernandez300
  • Fecha de inicio Fecha de inicio

jhonhernandez300

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, tengo un input y un botón, al hacer click me sale:
Cannot read properties of undefined (reading 'toLowerCase')

He leído varios posts y he instentado varias cosas, pero la verdad no se como resolver el problema.

<input type="text" id="search" placeholder="Buscar usuario..." value="">
<button id="submit" onclick="searchUsers()">Buscar</button>

const searchInput = document.getElementById("search");
console.log("searchInput " + searchInput);
const searchButton = document.getElementById("submit");
const resultsContainer = document.getElementById("results");

function searchUsers(query) {
console.log("query " + query);
const filteredUsers = users.filter(user =>
user.name.toLowerCase().includes(query.toLowerCase())
);
}

searchButton.addEventListener("click", () => {
console.log("typeof " + typeof searchInput);
if(searchInput != '') {
let searchInput2 = searchInput.toString();
let query = searchInput2.value.trim();
console.log("luego del addEventListener " + query);
searchUsers(query);
}
});

Lo que muestra la consola es esto:
searchInput [object HTMLInputElement]
query undefined
Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
typeof object
Cannot read properties of undefined (reading 'trim')
at HTMLButtonElement.<anonymous> (
 
Hola, el problema parece estar en la forma en que obtienes el valor del input. En lugar de convertir el elemento del input a una cadena y luego obtener su valor a través de esa cadena, puedes obtener directamente el valor del elemento del input. Intenta cambiar esta línea:

```
let searchInput2 = searchInput.toString();
let query = searchInput2.value.trim();
```

por esta:

```
let query = searchInput.value.trim();
```

Esto debería solucionar el problema de "Cannot read properties of undefined (reading 'trim')" y también asegurarte de que el valor del input se esté pasando correctamente a tu función `searchUsers()`.
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Búsqueda de Usuarios GitHub</title>
<link rel="stylesheet" type="text/css" href="css/mystyles.css">
</head>
<body>
<div class="finder">
<h1>Búsqueda de Usuarios GitHub</h1>
<div class="pseudo-search">
<input type="text" id="search" placeholder="Buscar usuario..." value="">
<button id="submit" onclick="searchUsers()">Buscar</button>
</div>

<div id="results">
</div>

</div><!-- finder -->
</body>
<script src="js/myscript.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Búsqueda de Usuarios GitHub</title>
<link rel="stylesheet" type="text/css" href="css/mystyles.css">
</head>
<body>
<div class="finder">
<h1>Búsqueda de Usuarios GitHub</h1>
<div class="pseudo-search">
<input type="text" id="search" placeholder="Buscar usuario..." value="">
<button id="submit" onclick="searchUsers()">Buscar</button>
</div>

<div id="results">
</div>

</div><!-- finder -->
</body>
<script src="js/myscript.js"></script>
</html>

archivo js

const users = [
{
"id": 1,
"login": "mojombo",
"avatar_url": "https://avatars.githubusercontent.com/u/1?v=4",
"created_at": "2007-10-20T05:24:19Z",
"name": "Tom",
"location": "San Francisco",
"twitter_username": "mojombo",
"blog": "http://tom.preston-werner.com",
"public_repos": 63,
"followers": 22827,
"following": 11
},
{
"id": 46,
"login": "bmizerany",
"avatar_url": "https://avatars.githubusercontent.com/u/46?v=4",
"created_at": "2008-01-24T04:44:30Z",
"name": "Tom Mizerany",
"location": null,
"twitter_username": null,
"blog": "",
"public_repos": 162,
"followers": 1314,
"following": 26
}
];
const searchInput = document.getElementById("search");
console.log("searchInput " + searchInput);
const searchButton = document.getElementById("submit");
const resultsContainer = document.getElementById("results");
function searchUsers(query) {
console.log("query " + query);
const filteredUsers = users.filter(user =>
user.name.toLowerCase().includes(query.toLowerCase())
);
if (filteredUsers.length === 0) {
resultsContainer.textContent = "No hay usuarios que cumplan con el criterio de búsqueda";
return;
}
const first = [];
first[0]= filteredUsers[0];
const resultsHtml = first.map(user => `
<div class="mycard">
<div class="myuser-card ">
<h2 class="myround">mojombo</h2>
<div>
<img src="img/yo.jpg" width="115px" height="115px">
</div>
<div class="myround">
SAT OCT 20 2007
</div>
</div>
<div class="myadditional">
<h2>${user.name}</h2>
<div class="mycity-twitter">
<div>San Francisco</div>
<div>@mojombo</div>
</div>
<div class="myrepos-followers">
<div>
<div>REPOS</div>
<div>63</div>
</div>
<div>
<div>REPOS</div>
<div>63</div>
</div>
<div>
<div>REPOS</div>
<div>63</div>
</div>
</div>
</div>
`).join("");
resultsContainer.innerHTML = resultsHtml;
}
searchButton.addEventListener("click", () => {
let query = searchInput.value.trim();
searchUsers(query);
});

Sigue apareciendo el mismo error
 
Creo que tu error está en

Insertar CODE, HTML o PHP: 
const filteredUsers = users.filter(user =>
  user.name.toLowerCase().includes(query.toLowerCase())
);

Debería ser algo como

Insertar CODE, HTML o PHP: 
const filteredUsers = users.filter(user =>
  user.name && user.name.toLowerCase().includes(query.toLowerCase())
);

Esto verificará primero si user.name existe antes de llamar a toLowerCase()
 
Gracias fmogro, hice el intento, sigue saliendo el error:
myscript.js:77 Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
at myscript.js:77:57 la línea q cambié
at Array.filter (<anonymous>)
at searchUsers (myscript.js:75:29)
at HTMLButtonElement.onclick (index.html:14:51)
 
Quieres algo así? Solo cambié la definición de query


No bota error en consola
 
Sí, funciona, gracias moises
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro